/* ==========================================================================
   papingu — WordPress-specific styles
   Layered on top of main.css (the ported design system):
   - mobile menu drawer (replaces the mockup's broken redirect)
   - prefers-reduced-motion
   - WP core blocks / alignments / captions / comments
   - admin bar offset for the fixed nav
   ========================================================================== */

/* ---- Mobile menu drawer ---- */
.mobile-menu[hidden] { display: none; }
.mobile-menu {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(12, 29, 43, .55);
	backdrop-filter: blur(4px);
	display: flex; justify-content: flex-end;
}
.mobile-menu .mm-panel {
	width: min(86vw, 360px); height: 100%;
	background: #fff; padding: 26px 24px;
	display: flex; flex-direction: column; gap: 6px;
	box-shadow: -20px 0 60px -20px rgba(16, 34, 52, .4);
	overflow-y: auto;
}
.mobile-menu .mm-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 6px; }
.mobile-menu .menu-close {
	background: none; border: 0; font-size: 26px; line-height: 1;
	color: var(--ink); cursor: pointer; padding: 6px; border-radius: 8px;
}
.mobile-menu .menu-close:hover { background: var(--bg2); }
.mobile-menu .nav-links { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu .nav-links a {
	display: block; padding: 12px 8px; font-size: 16px; font-weight: 500;
	color: var(--ink); border-bottom: 1px solid var(--border);
}
.mobile-menu .nav-links a:hover, .mobile-menu .nav-links a.active { color: var(--teal); }
/* Active page highlight — every menu item (incl. pulsur) is grey by default and
   turns teal only when it's the current page. */
.nav .nav-links .current-menu-item > a,
.nav .nav-links .current_page_item > a,
.nav .nav-links a[aria-current="page"],
.mobile-menu .nav-links .current-menu-item > a,
.mobile-menu .nav-links .current_page_item > a,
.mobile-menu .nav-links a[aria-current="page"] { color: var(--teal); }
.mobile-menu .mm-cta { display: block; width: 100%; margin-top: 18px; text-align: center; }
/* Clear the WP admin toolbar for logged-in users so the close button isn't hidden. */
body.admin-bar .mobile-menu { top: 46px; }
@media screen and (min-width: 783px) { body.admin-bar .mobile-menu { top: 32px; } }
/* Scroll lock: position:fixed (set with an inline top offset by JS) reliably
   stops the page behind from scrolling, including iOS Safari. */
body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* keyboard focus visibility (WCAG) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--teal-bright);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- WordPress core blocks & alignments ---- */
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content > * { margin-bottom: 20px; }
.entry-content p, .entry-content li { font-size: 17px; color: var(--ink2); font-weight: 300; line-height: 1.8; }
.entry-content h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 12px; }
.entry-content h3 { font-size: 22px; margin: 32px 0 10px; }
.entry-content a { color: var(--teal); text-decoration: underline; }
/* Buttons inside article content (imported READS posts) keep button styling. */
.entry-content a.btn-primary, .entry-content a.btn-white, .entry-content a.btn-outline, .entry-content a.btn-ghost { text-decoration: none; }
.entry-content a.btn-primary { color: #fff; }
.entry-content .post-cta { text-align: center; margin: 30px 0; }
.entry-content .post-note { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; font-size: 15px; }
.entry-content img, .wp-block-image img { border-radius: 12px; height: auto; }
.entry-content blockquote, .wp-block-quote {
	border-left: 3px solid var(--green); padding: 8px 0 8px 22px; margin: 28px 0;
	font-family: 'Sora', sans-serif; font-size: 20px; color: var(--ink);
}
.wp-block-image figcaption, .wp-caption-text { font-size: 13px; color: var(--ink3); text-align: center; margin-top: 8px; }
.alignwide { max-width: 1024px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 6px 24px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 24px; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--teal); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* pagination */
.papingu-pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 50px; }
.papingu-pagination .page-numbers {
	padding: 9px 15px; border: 1px solid var(--border2); border-radius: 8px;
	font-size: 14px; font-weight: 600; color: var(--ink2);
}
.papingu-pagination .page-numbers.current { background: var(--teal); color: #fff; border-color: var(--teal); }
.papingu-pagination a.page-numbers:hover { border-color: var(--teal); color: var(--teal); }

/* comments (kept minimal; blog is the focus) */
.comments-area { max-width: 760px; margin: 50px auto 0; }
.comment-list { list-style: none; }
.comment-list .comment-body { padding: 18px 0; border-top: 1px solid var(--border); }

/* fixed nav offset when the WP admin bar is present */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }

/* anchored sections clear the fixed nav */
:target { scroll-margin-top: 90px; }

/* ==========================================================================
   New components introduced by the remodel (not in the original mockup CSS)
   ========================================================================== */

/* WordPress renders the nav as <ul><li> — strip default list bullets/indent
   (the static mockup used bare <a>, so main.css didn't account for this). */
.nav-links,
.mobile-menu .nav-links,
.footer-col ul,
.papingu-pagination { list-style: none; margin: 0; padding: 0; }
.nav-links li { list-style: none; margin: 0; }

/* pulsur accent on real WP menu items (class lands on <li>) */
.nav-links li.menu-prod > a { color: var(--teal); font-style: italic; font-weight: 600; }
.nav-links li.current-menu-item > a { color: var(--teal); }

/* Full-width text block (overrides the 760px .prose cap) */
.prose.prose--full { max-width: none; }

/* Long stat values (e.g. a city name) sit smaller + balanced */
.stat-v.stat-v--sm { font-size: clamp(18px, 2vw, 22px); line-height: 1.2; text-wrap: balance; }

/* ---- Footer refresh ---- */
.footer { position: relative; }
.footer::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--teal), var(--green));
}
/* Logo on a white chip (the brand logo is designed for light backgrounds) */
.footer-logo {
	display: inline-flex; align-items: center;
	background: #fff; padding: 13px 18px; border-radius: 12px;
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5);
	margin-bottom: 18px;
}
.footer-logo img { height: 34px; width: auto; display: block; }
.footer-brand p { margin-top: 0; }
/* Slightly clearer column headings */
.footer-col h5 { color: var(--teal-bright); opacity: .9; }
/* Bottom bar socials as subtle pills */
.footer-socials a {
	display: inline-block; margin-left: 10px; padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, .18); border-radius: 30px;
	font-size: 12px; color: rgba(255, 255, 255, .7);
}
.footer-socials a:hover { border-color: var(--teal-bright); color: #fff; }

/* pulsur logo in the pulsur band (when a logo path is set) */
.pb-logo-img { height: 40px; width: auto; display: block; margin-bottom: 6px; }

/* Hero image (replaces the canvas when an image URL is set) */
.hv-panel .hv-img { width: 100%; height: 340px; object-fit: cover; border-radius: 12px; display: block; }

/* Pillar / service card image (bleeds to the card edges, top) */
.svc-card .svc-img { display: block; width: calc(100% + 64px); height: 170px; object-fit: cover; margin: -32px -32px 22px; border-radius: 16px 16px 0 0; }

/* Partners / clients — infinite-scroll logo marquee */
.marquee-section .section-head { margin-bottom: 36px; }
.marquee {
	position: relative; overflow: hidden; width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
	display: flex; align-items: center; gap: 72px; width: max-content;
	animation: papingu-marquee var(--uic-logo-speed, 42s) linear infinite; will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee { cursor: grab; }
.marquee.is-dragging { cursor: grabbing; user-select: none; }
.marquee.is-dragging .marquee-item img { filter: grayscale(1); opacity: .62; }
.marquee-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 56px; }
.marquee-item img {
	height: 44px; width: auto; max-width: 170px; object-fit: contain; display: block;
	filter: grayscale(1); opacity: .62; transition: filter .3s ease, opacity .3s ease;
}
.marquee-item:hover img { filter: none; opacity: 1; }
.marquee-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink2); white-space: nowrap; }
@keyframes papingu-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) {
	.marquee-track { gap: 48px; }
	.marquee-item { height: 44px; }
	.marquee-item img { height: 34px; max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
	.marquee { -webkit-mask-image: none; mask-image: none; }
	.marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 36px 56px; padding: 0 24px; }
	.marquee-item[aria-hidden="true"] { display: none; }
}

/* Testimonials */
.tcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard {
	background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin: 0;
	display: flex; flex-direction: column; gap: 18px;
}
.tcard blockquote {
	font-size: 15px; line-height: 1.7; color: var(--ink2); font-weight: 300; border: 0; padding: 0; margin: 0;
}
.tcard blockquote::before { content: '“'; font-family: 'Sora', sans-serif; font-size: 40px; color: var(--teal); opacity: .35; display: block; line-height: .4; margin-bottom: 6px; }
.tcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.tcard-logo img { height: 26px; width: auto; display: block; max-width: 130px; object-fit: contain; }
.tcard-stars { color: #f4b400; font-size: 14px; letter-spacing: 2px; margin-left: auto; }
.tcard blockquote::before { content: none; } /* stars replace the decorative quote mark */
.tcard figcaption { margin-top: auto; }
.tcard figcaption strong { display: block; font-family: 'Sora', sans-serif; font-size: 15px; color: var(--ink); }
.tcard figcaption span { font-size: 13px; color: var(--ink3); }
@media (max-width: 920px) { .tcard-grid { grid-template-columns: 1fr; } }

/* Testimonials marquee — cards roll horizontally, pausing on hover */
.tmarquee {
	position: relative; overflow: hidden; width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tmarquee-track {
	display: flex; align-items: stretch; gap: 20px; width: max-content;
	padding: 6px 20px; animation: papingu-marquee var(--uic-tst-speed, 70s) linear infinite; will-change: transform;
}
.tmarquee:hover .tmarquee-track { animation-play-state: paused; }
.tmarquee { cursor: grab; }
.tmarquee.is-dragging { cursor: grabbing; user-select: none; }
.tmarquee .tcard { flex: 0 0 360px; width: 360px; }
@media (max-width: 560px) { .tmarquee .tcard { flex-basis: 300px; width: 300px; } .tmarquee-track { gap: 14px; } }
@media (prefers-reduced-motion: reduce) {
	.tmarquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
	.tmarquee-track { animation: none; }
	.tmarquee .tcard[aria-hidden="true"] { display: none; }
}

/* Value cards (icon + text, 2-up) — e.g. "What to expect" */
.vcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vcard { display: flex; gap: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; }
.vcard-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.vcard p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink2); }
@media (max-width: 920px) { .vcard-grid { grid-template-columns: 1fr; } }

/* Academy tiers — comparison matrix */
.tier-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.tier-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.tier-table th, .tier-table td {
	text-align: left; vertical-align: top; padding: 18px 22px;
	border-top: 1px solid var(--border); font-weight: 400;
}
.tier-table thead th { border-top: 0; padding-top: 6px; }
.tier-table thead .tt-corner { border: 0; }
/* row-label column */
.tt-label, .tt-corner { width: 140px; min-width: 130px; }
.tt-label { font-size: 13px; font-weight: 600; color: var(--ink3); }
.tt-corner { background: transparent; }
/* tier header */
.tt-name { display: block; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); }
.tt-tag { display: block; font-size: 13px; color: var(--ink2); font-weight: 300; margin-top: 4px; }
.tier-badge {
	display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 700;
	letter-spacing: .03em; padding: 5px 12px; border-radius: 30px;
}
.tier-badge--foundation { background: #e9effc; color: #2f60d8; }
.tier-badge--popular    { background: #e0f2e8; color: #1f8a55; }
.tier-badge--executive  { background: #fbebd6; color: #b9791d; }
/* cell content */
.tier-table td { font-size: 14px; line-height: 1.55; color: var(--ink2); }
.tt-price { display: block; font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: var(--ink); }
.tt-price-note { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; }
/* highlighted "Most popular" column — subtle tint + blue accent on each cell */
.tier-table th.tt-col--popular, .tier-table td.tt-col--popular { background: rgba(47, 96, 216, .035); }
.tier-table tbody td.tt-col--popular, .tier-table tfoot td.tt-col--popular { border-top: 2px solid var(--teal); }
.tier-table thead th.tt-col--popular { box-shadow: inset 0 3px 0 0 var(--teal); }
.tier-cta { margin: 0; }
/* Mobile: stacked tier cards instead of a side-scrolling table */
.tier-cards { display: none; }
.tier-mcard {
	background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px;
	box-shadow: 0 18px 40px -30px rgba(16, 34, 52, .25);
}
.tier-mcard.is-featured { border-color: var(--teal); box-shadow: 0 22px 52px -28px rgba(26, 127, 168, .32); }
.tier-mcard .tt-name { font-size: 21px; margin: 0; }
.tier-mcard .tt-tag { font-size: 14px; color: var(--ink2); font-weight: 300; margin: 4px 0 0; }
.tier-mcard .tier-badge { margin-top: 14px; }
.tier-mprice { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.tier-mrows { margin: 6px 0 22px; padding: 0; }
.tier-mrows > div { padding: 14px 0; border-top: 1px solid var(--border); }
.tier-mrows dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 4px; }
.tier-mrows dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.tier-mcard .tier-cta { display: flex; width: 100%; justify-content: center; }
@media (max-width: 760px) {
	.tier-table-wrap { display: none; }
	.tier-cards { display: grid; gap: 18px; margin-top: 12px; }
}

/* Video embed (Resources TALKS) */
.vf-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vf-embed { width: 100%; height: 100%; min-height: 320px; display: flex; align-items: center; }
.vf-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 0; }

/* Video lightbox (Resources TALKS) */
.vf-video-trigger { border: 0; padding: 0; cursor: pointer; position: relative; overflow: hidden; width: 100%; }
.vf-video-trigger .vf-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-video-trigger::after { content: ''; position: absolute; inset: 0; background: rgba(12, 29, 43, .35); transition: background .2s; }
.vf-video-trigger:hover::after { background: rgba(12, 29, 43, .2); }
.vf-video-trigger .vf-play { position: relative; z-index: 1; }
.vlb[hidden] { display: none; }
.vlb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vlb-backdrop { position: absolute; inset: 0; background: rgba(12, 29, 43, .82); backdrop-filter: blur(3px); }
.vlb-panel { position: relative; z-index: 1; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; }
.vlb-frame { width: 100%; height: 100%; }
.vlb-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.vlb-close { position: absolute; top: -42px; right: 0; background: none; border: 0; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* Blog/READS card thumbnail — crop the featured image to the fixed height
   (a real photo would otherwise overflow and the text would overlap it). */
.blog-thumb { overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Unified image hover zoom (matches the card-lift micro-interaction) ----
   Photos gently scale inside their frame on hover, clipped by the frame. */
.blog-thumb img,
.svc-card .svc-img,
.about-visual img,
.person-photo img,
.single-hero img,
.hv-panel .hv-img,
.vf-poster {
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.svc-card, .single-hero, .hv-panel { overflow: hidden; }
.single-hero { border-radius: 14px; }
.blog-card:hover .blog-thumb img,
.svc-card:hover .svc-img,
.about-visual:hover img,
.person:hover .person-photo img,
.single-hero:hover img,
.hv-panel:hover .hv-img,
.vf-thumb:hover .vf-poster {
	transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
	.blog-card:hover .blog-thumb img,
	.svc-card:hover .svc-img,
	.about-visual:hover img,
	.person:hover .person-photo img,
	.single-hero:hover img,
	.hv-panel:hover .hv-img,
	.vf-thumb:hover .vf-poster { transform: none; }
}

/* Single post */
.single-hero { margin-top: 36px; }
.single-hero img { width: 100%; height: auto; display: block; }
.entry-footer { max-width: 760px; margin: 28px auto 0; }
.post-meta { font-size: 14px; color: var(--ink3); margin-top: 10px; }
.post-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.post-tags a { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 30px; background: var(--teal-tint); color: var(--teal-dark); }

/* footer socials inline */
.footer-socials a { color: rgba(255,255,255,.62); margin-left: 14px; }
.footer-socials a:hover { color: var(--teal-bright); }

/* contact input error state (matches mockup) */
.finput.error, .ftext.error { border-color: #e2574c; box-shadow: 0 0 0 3px rgba(226,87,76,.12); }

/* ---- Responsive hardening (prevent horizontal overflow on small screens) ---- */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, canvas, iframe, video { max-width: 100%; }
@media (max-width: 560px) {
	.hero-sub { max-width: 100%; }
	.hero h1 { overflow-wrap: anywhere; }
	.hero-cta { flex-direction: column; align-items: stretch; }
	.hero-cta .btn-primary, .hero-cta .btn-ghost { width: 100%; text-align: center; }
	.ph-cta .btn-primary, .ph-cta .btn-outline-w,
	.cta-btns .btn-white, .cta-btns .btn-outline-w { width: 100%; text-align: center; }
	.cta-btns { flex-direction: column; }
	/* floating hero cards already go static < 920; keep them from overflowing */
	.hv-float { max-width: 100%; }
}

/* ---- Mobile header: hide the desktop CTA (it's in the drawer) ---- */
@media (max-width: 920px) {
	.nav .nav-btn { display: none; }
	.nav-inner { gap: 12px; }
	.nav-toggle { margin-left: auto; }
}

/* ---- Cookie consent banner ---- */
.uic-cookie {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
	max-width: 760px; margin: 0 auto;
	background: var(--dark); color: #fff;
	border-radius: 14px; padding: 18px 22px;
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
}
.uic-cookie[hidden] { display: none; }
.uic-cookie p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.8); flex: 1; min-width: 220px; }
.uic-cookie a { color: var(--teal-bright); text-decoration: underline; }
.uic-cookie .uic-cookie__actions { display: flex; gap: 10px; flex-shrink: 0; }
.uic-cookie button {
	font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
	padding: 9px 18px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
}
.uic-cookie .cookie-accept { background: var(--teal); color: #fff; }
.uic-cookie .cookie-accept:hover { background: var(--teal-bright); }
.uic-cookie .cookie-decline { background: transparent; color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.25); }
.uic-cookie .cookie-decline:hover { color: #fff; border-color: #fff; }
@media (max-width: 560px) { .uic-cookie { flex-direction: column; align-items: stretch; text-align: left; } .uic-cookie .uic-cookie__actions { justify-content: flex-end; } }

/* ---- Resources: "Listen everywhere" podcast platform badges ---- */
.pod-strip { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.pod-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 12px; }
.pod-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pod-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px 8px 11px; border-radius: 999px;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
	color: rgba(255,255,255,.9); font: 600 13px/1 'Inter', sans-serif; text-decoration: none;
	transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pod-chip .pod-ic { width: 17px; height: 17px; flex-shrink: 0; fill: var(--bc, #fff); transition: fill .18s ease; }
.pod-chip:hover, .pod-chip:focus-visible {
	background: var(--bc, #1a7fa8); border-color: var(--bc, #1a7fa8); color: #fff;
	transform: translateY(-2px); box-shadow: 0 8px 22px -8px var(--bc, #1a7fa8);
}
.pod-chip:hover .pod-ic, .pod-chip:focus-visible .pod-ic { fill: #fff; }
@media (max-width: 560px) { .pod-chips { gap: 7px; } .pod-chip { font-size: 12px; padding: 7px 12px 7px 10px; } }

/* ---- Mobile sticky header: clean solid bar ----
   iOS Safari renders position:fixed + backdrop-filter + translucency poorly,
   letting dark sections bleed through the menu. On small screens we drop the
   blur and use a solid white bar with a border + (scrolled) shadow. */
@media (max-width: 920px) {
	.nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border); }
	.nav.scrolled { background: #fff; box-shadow: 0 2px 16px -8px rgba(16,34,52,.28); }
}

/* ---- Back-to-top button (desktop + mobile) — matches the site's button radius ---- */
.to-top {
	position: fixed; right: 18px; bottom: 18px; z-index: 90;
	width: 46px; height: 46px; border-radius: 7px;
	background: var(--teal); color: #fff; border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 28px -10px rgba(16,34,52,.5);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease, visibility .25s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--teal-bright); transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; }

/* (reCAPTCHA badge visibility + legal disclosure handled by the
   urban-innovate-core plugin, so they only apply when reCAPTCHA is active.) */

/* ---- Downloads "See more" (reveals 8 more per click) ---- */
.dl-card.uic-dl-hidden { display: none; }
.dl-more-wrap { text-align: center; margin-top: 34px; }
.dl-more {
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; color: var(--teal, #1a7fa8);
	border: 1.5px solid var(--border2, #d4e1ea); border-radius: 9px;
	padding: 12px 26px; font: 600 14px/1 'Inter', sans-serif; cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.dl-more:hover, .dl-more:focus-visible { background: var(--teal, #1a7fa8); border-color: var(--teal, #1a7fa8); color: #fff; transform: translateY(-1px); }
.dl-more .dl-more-ic { transition: transform .2s ease; }
.dl-more:hover .dl-more-ic { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .dl-more:hover { transform: none; } }

/* ---- Contact page: branded contact/social pills ---- */
.contact-pills { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--border); padding-top: 24px; }
.contact-pill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 16px 9px 12px; border-radius: 999px;
	background: #fff; border: 1.5px solid var(--border2, #d4e1ea);
	color: var(--ink, #102234); font: 600 13.5px/1 'Inter', sans-serif; text-decoration: none;
	transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.contact-pill .cp-ic { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.contact-pill .cp-ic svg { width: 18px; height: 18px; fill: var(--bc, #1a7fa8); transition: fill .18s ease; }
a.contact-pill:hover, a.contact-pill:focus-visible {
	background: var(--bc, #1a7fa8); border-color: var(--bc, #1a7fa8); color: #fff;
	transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--bc, #1a7fa8);
}
a.contact-pill:hover .cp-ic svg, a.contact-pill:focus-visible .cp-ic svg { fill: #fff; }
.contact-pill.is-static { cursor: default; }
@media (prefers-reduced-motion: reduce) { a.contact-pill:hover, a.contact-pill:focus-visible { transform: none; } }

/* ---- About: People (photo beside the bio, not full-width) ---- */
.people-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 8px auto 0; max-width: 880px; }
.person {
	display: grid; grid-template-columns: 250px 1fr; align-items: stretch;
	background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
	box-shadow: 0 18px 40px -28px rgba(16,34,52,.25);
	transition: transform .2s ease, box-shadow .2s ease;
}
.person:hover, .person:focus-within { transform: translateY(-4px); box-shadow: 0 26px 56px -28px rgba(16,34,52,.35); }
.person-photo {
	width: 100%; height: 100%; min-height: 260px;
	background: linear-gradient(155deg, var(--teal-tint), var(--green-tint));
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-initials { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 44px; color: var(--teal); opacity: .55; letter-spacing: .02em; }
.person-body { padding: 28px 32px; align-self: center; }
.person-name { font-size: 21px; line-height: 1.25; margin: 0; }
.person-role { font-size: 13px; font-weight: 600; color: var(--teal); margin-top: 3px; }
.person-points { list-style: none; margin: 18px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.person-points li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink2); line-height: 1.5; margin-bottom: 9px; break-inside: avoid; }
.person-points li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green-dark); font-weight: 700; }
@media (max-width: 640px) {
	.person { grid-template-columns: 1fr; }
	.person-photo { min-height: 0; aspect-ratio: 16 / 10; }
	.person-body { padding: 22px 24px; }
	.person-points { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .person:hover, .person:focus-within { transform: none; } }

/* ---- pulsur hero logo (replaces the pill when set) ---- */
.pulsur-hero .ph-logo { display: block; height: 44px; width: auto; max-width: 240px; margin: 0 0 26px; }
@media (max-width: 768px) { .pulsur-hero .ph-logo { height: 38px; margin-bottom: 20px; } }

/* ---- Mobile / tablet vertical rhythm ----
   The ported desktop spacing (100px section padding, 140px hero, etc.) leaves
   huge empty gaps on phones. Tighten the section rhythm on small screens. */
@media (max-width: 768px) {
	.hero { padding: 104px 0 56px; }
	.page-head { padding: 100px 0 40px; }
	.section-pad { padding: 60px 0; }
	.pulsur-hero { padding: 104px 0 56px; }
	.pb-inner { padding: 56px 0; }
	.cta-inner { padding: 58px 0; }
	.footer { padding: 52px 0 28px; }
	.footer-grid { margin-bottom: 32px; }
	.stat { padding: 28px 22px; }
	.news { padding: 40px 24px; }
}
@media (max-width: 480px) {
	.section-pad { padding: 52px 0; }
	.hero { padding: 96px 0 48px; }
	.stat { padding: 24px 18px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.reveal { opacity: 1 !important; transform: none !important; }
	.pod-chip:hover, .pod-chip:focus-visible { transform: none; }
	.to-top { transition: opacity .2s ease, visibility .2s ease; }
	.to-top:hover { transform: none; }
}

/* ---- Guarantee side gutters on EVERY .wrap ----
   Some inner blocks combine .wrap with a class that uses the `padding` shorthand
   for vertical spacing (e.g. .cta-inner, .pb-inner), which would wipe the
   left/right gutters and let content touch the screen edges on mobile. These
   longhand left/right rules are last in the cascade, so they always win for the
   horizontal padding while leaving each block's own top/bottom padding intact. */
.wrap { padding-left: 32px; padding-right: 32px; }
@media (max-width: 768px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 480px) { .wrap { padding-left: 20px; padding-right: 20px; } }