/*
Theme Name: SeeResponse 2026
Theme URI: https://seeresponse.com
Author: Demandloft
Description: SeeResponse site theme. Dark ground (#08080b) with an indigo-violet accent (#2909ae), Plus Jakarta Sans with an Instrument Serif italic accent, and a header menu that puts the four practices, eighteen services and six industries one hop from every page.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: seeresponse2026
*/

:root {
	--ground: var(--wp--preset--color--ground);
	--band: var(--wp--preset--color--band);
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--accent: var(--wp--preset--color--accent);
	--accent-lt: var(--wp--preset--color--accent-light);   /* on dark ground: 5.6:1 */
	--accent-ltr: var(--wp--preset--color--accent-lighter); /* links on dark ground: 7.9:1 */
	--paper: var(--wp--preset--color--paper);
	--grey: var(--wp--preset--color--grey);
	--accent-rgb: 41, 9, 174;
	--glow: 1;
	--serif: var(--wp--preset--font-family--serif);
}

body { -webkit-font-smoothing: antialiased; }
.it { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Sections sit flush: WordPress's default gap is for text, not full-width bands. */
.wp-site-blocks > * + *,
.sr-front > * + * { margin-block-start: 0; }

/* ---------- Header ---------- */
header.wp-block-template-part { position: relative; z-index: 40; background: #ffffff; box-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.sr-nav-bar { max-width: 1368px; margin-inline: auto; padding: 21px var(--wp--style--root--padding-right) 21px var(--wp--style--root--padding-left); gap: 30px; position: relative; }
.sr-nav-bar .wp-block-site-logo img { height: 48px; width: auto; }
.sr-cta-dark .wp-block-button__link { background: var(--ink); color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; padding: 14px 25px; border-radius: 6px; }
.sr-cta-dark .wp-block-button__link:hover { background: var(--accent); color: #ffffff; }

/* The shell exists for the phone menu. display:contents keeps the toggle and the nav as
   direct children of the bar, so the desktop row is laid out exactly as it was before. */
.sr-nav-shell { display: contents; }
.sr-nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px;
	border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; background: #ffffff; cursor: pointer; padding: 0; }
.sr-nav-toggle .sr-bars { position: relative; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.sr-nav-toggle .sr-bars::before, .sr-nav-toggle .sr-bars::after { content: ""; position: absolute; left: 0;
	width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .18s ease; }
.sr-nav-toggle .sr-bars::before { top: -6px; }
.sr-nav-toggle .sr-bars::after { top: 6px; }
.sr-nav-shell.is-open .sr-nav-toggle .sr-bars { background: transparent; }
.sr-nav-shell.is-open .sr-nav-toggle .sr-bars::before { transform: translateY(6px) rotate(45deg); }
.sr-nav-shell.is-open .sr-nav-toggle .sr-bars::after { transform: translateY(-6px) rotate(-45deg); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; }
/* Shown only inside the phone panel: the desktop bar has the real Book a call button. */
.hdr-cta-mobile { display: none; }

.hdr-nav { display: flex; gap: 32px; align-items: center; font-size: 15.5px; font-weight: 500; }
.hdr-top { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; text-decoration: none; }
.hdr-top:hover, .hdr-item:hover > .hdr-top, .hdr-item:focus-within > .hdr-top { color: var(--ink); }
.hdr-top.is-current { color: var(--ink); font-weight: 600; }
.hdr-top svg { transition: transform .18s ease; }
.hdr-item:hover > .hdr-top svg, .hdr-item:focus-within > .hdr-top svg { transform: rotate(180deg); }
.hdr-item { position: relative; }
.hdr-item.mega { position: static; }
.hdr-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 31px; z-index: 50;
	visibility: hidden; opacity: 0; transition: opacity .16s ease, visibility .16s; }
.hdr-item.mega > .hdr-menu { top: calc(100% - 21px); left: var(--wp--style--root--padding-left); right: var(--wp--style--root--padding-right); transform: none; }
.hdr-item:hover > .hdr-menu, .hdr-item:focus-within > .hdr-menu { visibility: visible; opacity: 1; }
.hdr-panel { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 15px; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
	padding: 28px 30px 22px 30px; min-width: 250px; }
.hdr-item.mega .hdr-panel { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 30px; }
.hdr-head { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); font-weight: 700; margin-bottom: 10px; }
.hdr-panel a.hdr-link { display: block; color: var(--ink-soft); font-size: 15px; line-height: 1.4; padding: 6px 0; text-decoration: none;
	transition: color .16s ease, padding-left .16s ease; }
.hdr-panel a.hdr-link:hover { color: var(--accent); padding-left: 4px; }
.hdr-panel a.hdr-link.is-current { color: var(--ink); font-weight: 600; }
.hdr-foot { grid-column: 1 / -1; border-top: 1px solid rgba(0,0,0,0.08); margin-top: 16px; padding-top: 14px; }
.hdr-panel .hdr-foot a { color: var(--accent); font-size: 14.5px; font-weight: 600; text-decoration: none; }

/* ---------- Pages ---------- */
.sr-page { padding-top: 60px; padding-bottom: 96px; }
.sr-page-title { font-size: clamp(40px, 5.6vw, 60px); line-height: 1.05; letter-spacing: -0.038em; margin: 0 0 20px; }
.sr-eyebrow { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 13px; }
/* The supporting line under a heading. Missing it is what made sections read as a stack of parts. */
.sr-deck { font-size: 15.5px; color: rgba(255,255,255,0.55); margin: 0 auto 26px 0; max-width: 640px; }
/* WordPress centres every constrained-layout child with `margin-left: auto !important`, so
   no ordinary selector can win and a deck narrower than the column drifts away from the
   heading it belongs to: the fault DESIGN-PATTERNS 17 bans, arriving through the layout
   engine rather than the markup. Matching !important is the only way back. */
.wp-block-group.is-layout-constrained > .sr-deck,
.wp-block-group.is-layout-constrained > .sr-eyebrow { margin-left: 0 !important; margin-right: auto !important; }
.sr-section-head h2 { margin: 0 0 10px; }

/* ---------- Blog ---------- */
.sr-posts .wp-block-post { margin: 0; }
.sr-post-img img { border-radius: 14px; }
.sr-posts .wp-block-post-title { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; margin: 12px 0 8px; }
.sr-posts .wp-block-post-title a { text-decoration: none; color: inherit; }
.sr-posts .wp-block-post-title a:hover { color: var(--accent-ltr); }
.sr-posts .wp-block-post-excerpt { font-size: 15px; color: rgba(255,255,255,0.62); }
.sr-date { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.sr-single .wp-block-post-content { font-size: 18px; line-height: 1.7; }
.sr-single .wp-block-post-content h2 { font-size: 30px; margin: 44px 0 14px; }
.sr-single .wp-block-post-content h3 { font-size: 23px; margin: 34px 0 12px; }
.sr-single .wp-block-post-content a { text-decoration: underline; }
.sr-post-hero img { border-radius: 16px; margin: 26px 0 10px; }
.sr-post-cta { margin-top: 64px; border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; padding: 34px 32px;
	background: linear-gradient(165deg, rgba(var(--accent-rgb),0.30) 0%, rgba(var(--accent-rgb),0.07) 40%, rgba(255,255,255,0.025) 100%); }
.sr-post-cta h2 { font-size: 27px; margin: 0 0 8px; }
.sr-post-cta p { margin: 0 0 20px; color: rgba(255,255,255,0.72); }

/* ---------- Contact form (Contact Form 7) ---------- */
.wpcf7 form { display: grid; gap: 18px; max-width: 640px; }
.wpcf7 form > p { margin: 0; }
.wpcf7 label { display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; font-size: 16px; color: #f4f4f6;
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: 9px; padding: 13px 15px; }
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 input:focus-visible, .wpcf7 textarea:focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 2px; }
.wpcf7 input[type="submit"] { background: #ffffff; color: var(--ink); border: 0; border-radius: 7px; padding: 15px 26px;
	font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.wpcf7 input[type="submit"]:hover { background: var(--accent-ltr); }
.wpcf7-not-valid-tip { color: #ff9a9a; font-size: 14px; font-weight: 500; }
.wpcf7 form .wpcf7-response-output { margin: 0; border-radius: 9px; padding: 12px 14px; font-size: 15px; }

/* ---------- Footer ---------- */
.sr-footer { background: var(--paper); color: var(--ink); padding-top: 68px; padding-bottom: 32px; }
.sr-foot { gap: 30px; padding-bottom: 49px; border-bottom: 1px solid rgba(0,0,0,0.10); }
.sr-foot .wp-block-site-logo img { height: 44px; width: auto; }
.sr-foot-blurb { font-size: 15.5px; line-height: 1.62; color: #55555f; margin: 19px 0 23px; max-width: 314px; }
.sr-foot-email { font-size: 15px; color: var(--ink); font-weight: 600; margin: 0; }
.sr-foot-line { font-size: 14.5px; color: #55555f; margin: 5px 0 0; line-height: 1.55; }
.sr-foot h3 { margin: 0 0 17px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); font-weight: 700; }
.sr-foot ul { list-style: none; margin: 0; padding: 0; }
.sr-foot li { line-height: 2.1; }
.sr-foot a { text-decoration: none; color: var(--ink-soft); font-size: 15px; transition: color .16s ease; }
.sr-foot a:hover { color: var(--accent); }
.sr-foot-bottom { margin-top: 23px; gap: 20px; }
.sr-legal { font-size: 14px; color: #7a7a85; margin: 0; }
.sr-legal a { color: #7a7a85; text-decoration: none; }
.sr-legal a:hover { color: var(--ink); }
.sr-social.wp-block-social-links { gap: 10px; }
.sr-social .wp-social-link { background: transparent; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center; transition: background .16s ease, border-color .16s ease; }
.sr-social .wp-social-link a { padding: 0; color: var(--ink-soft); }
.sr-social .wp-social-link:hover { background: var(--ink); border-color: var(--ink); }
.sr-social .wp-social-link:hover a { color: #ffffff; }

/* ---------- Home: hero ---------- */
/* The glow is what stops the dark ground reading as flat black. Inner pages use a weaker one. */
.sr-hero { background:
		radial-gradient(120% 62% at 50% 46%, rgba(var(--accent-rgb), calc(0.88 * var(--glow))) 0%,
			rgba(var(--accent-rgb), calc(0.42 * var(--glow))) 34%,
			rgba(var(--accent-rgb), calc(0.11 * var(--glow))) 62%, rgba(8,8,11,0) 78%),
		var(--ground);
	padding-top: 87px; padding-bottom: 74px; }
.sr-hero-title { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; letter-spacing: -0.042em; max-width: 15ch;
	margin: 0 auto 22px; text-wrap: pretty; }
.sr-hero-deck { font-size: 17.5px; line-height: 1.62; color: rgba(255,255,255,0.72); max-width: 532px; margin: 0 auto 40px; }
.sr-hero-btns { gap: 12px; }
.sr-btn-ghost .wp-block-button__link { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.26); }
.sr-btn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,0.08); color: #ffffff; }
.sr-trust-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.68); margin: 54px 0 0; }

/* ---------- Home: services ---------- */
.sr-services { padding-top: 10px; padding-bottom: 84px; }
.sr-cards { gap: 19px; margin-top: 32px; }
.sr-card { border: 1px solid rgba(255,255,255,0.10); border-radius: 17px; padding: 30px 28px 32px;
	background: linear-gradient(165deg, rgba(var(--accent-rgb),0.30) 0%, rgba(var(--accent-rgb),0.07) 40%, rgba(255,255,255,0.025) 100%); }
.sr-card h3 { font-size: 25.5px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; }
.sr-card > p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.55); margin: 0 0 25px; }
.sr-card-links { list-style: none; margin: 0; padding: 21px 0 0; border-top: 1px solid rgba(255,255,255,0.10);
	display: grid; gap: 13px; }
.sr-card-links a { color: rgba(255,255,255,0.80); font-size: 15.5px; line-height: 1.4; text-decoration: none;
	transition: color .16s ease, padding-left .16s ease; }
.sr-card-links a:hover { color: #ffffff; padding-left: 4px; }

/* ---------- Home: closing band ---------- */
.sr-closing { padding-top: 86px; padding-bottom: 92px;
	background: linear-gradient(150deg, rgba(var(--accent-rgb),0.85) 0%, rgba(var(--accent-rgb),0.45) 44%, rgba(8,8,11,0.9) 100%), var(--ground); }
.sr-closing h2 { font-size: clamp(32px, 4vw, 47px); margin: 0 0 12px; }
.sr-closing p { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 28px; }

/* ---------- Services archive ---------- */
.sr-page-head { padding-top: 62px; padding-bottom: 6px; }
.sr-lede { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 760px; margin: 0 0 12px; }
.sr-stage { padding-top: 54px; padding-bottom: 58px; }
/* A dark page needs bands, not hairlines: alternate the surface so the three stages
   read as three sections instead of one unbroken sheet. */
.sr-stage-band { background:
		radial-gradient(88% 130% at 18% 0%, rgba(var(--accent-rgb), calc(0.22 * var(--glow))) 0%,
			rgba(var(--accent-rgb), calc(0.06 * var(--glow))) 46%, rgba(18,18,26,0) 76%), var(--band);
	border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.sr-stage-title { font-size: clamp(30px, 3.4vw, 43.5px); margin: 0 0 10px; }
.sr-stage-body { font-size: 16.5px; line-height: 1.62; color: rgba(255,255,255,0.70); max-width: 820px; margin: 0 0 34px; }
.sr-svc-grid { gap: 30px; }
.sr-svc { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.58); }
.sr-svc a { text-decoration: none; color: #ffffff; }
.sr-svc a strong { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.sr-svc a:hover strong { color: var(--accent-ltr); }
.wp-block-group.is-layout-constrained > .sr-lede,
.wp-block-group.is-layout-constrained > .sr-stage-body { margin-left: 0 !important; margin-right: auto !important; }

/* ---------- About ---------- */
.sr-more { margin: 14px 0 0; font-size: 14.5px; font-weight: 600; }
.sr-more a { color: var(--accent-ltr); text-decoration: none; }
.sr-more a:hover { color: #ffffff; }
.sr-team { gap: 30px; margin-top: 34px; }
.sr-person { border: 1px solid rgba(255,255,255,0.10); border-radius: 17px; padding: 28px 26px 26px;
	background: rgba(255,255,255,0.03); }
.sr-face img { border-radius: 999px; display: block; }
.sr-person h3 { font-size: 20px; margin: 18px 0 2px; }
.sr-role { font-size: 14.5px; color: rgba(255,255,255,0.55); margin: 0; }

/* ---------- Contact ---------- */
.sr-contact { gap: 46px; }
.sr-routes .sr-card { margin-bottom: 16px; padding: 24px 24px 22px; }
.sr-routes .sr-card h3 { font-size: 19px; margin: 0 0 6px; }
.sr-routes .sr-card p { font-size: 14.5px; color: rgba(255,255,255,0.60); margin: 0; }
.sr-direct { font-size: 14.5px; line-height: 1.9; color: rgba(255,255,255,0.55); margin: 26px 0 0; }
.sr-form-title { font-size: clamp(26px, 3vw, 34px); margin: 0 0 10px; }
.sr-formnote { font-size: 13px; color: rgba(255,255,255,0.45); margin: 14px 0 0; }

/* FAQ answers run 110 to 150 words, which is a wall when every one is open. */
.sr-faq { border-bottom: 1px solid rgba(255,255,255,0.10); padding: 18px 0; }
.sr-faq summary { cursor: pointer; list-style: none; font-size: 17.5px; font-weight: 600; color: #ffffff;
	display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::marker { content: ""; }
.sr-faq summary::after { content: ""; width: 11px; height: 11px; flex: none; border-right: 2.4px solid var(--accent-ltr);
	border-bottom: 2.4px solid var(--accent-ltr); transform: rotate(45deg) translateY(-3px); transition: transform .18s ease; }
.sr-faq[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.sr-faq p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.70); margin: 14px 0 0; max-width: 820px; }

/* ---------- Industries ---------- */
.sr-card-deck { font-size: 14px; color: rgba(255,255,255,0.55); margin: 0 0 14px; }
.sr-card .sr-card-deck + p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.sr-clients { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.58); margin: 18px 0 0;
	padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.10); }
.sr-clients strong { display: block; font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
	color: rgba(255,255,255,0.45); font-weight: 700; margin-bottom: 5px; }

/* ---------- Customers ---------- */
.sr-metrics { gap: 19px; margin-top: 30px; }
.sr-metric { border: 1px solid rgba(255,255,255,0.10); border-radius: 15px; padding: 26px 24px 22px;
	background: rgba(255,255,255,0.03); }
.sr-figure { font-size: 46px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin: 0; }
.sr-figure-label { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 12px 0 8px; }
.sr-figure-client a { font-size: 13.5px; font-weight: 600; color: var(--accent-ltr); text-decoration: none; }
.sr-figure-client { margin: 0; }
.sr-clients-grid { gap: 19px; margin-top: 19px; }
.sr-client { border: 1px solid rgba(255,255,255,0.10); border-radius: 15px; padding: 26px 24px 22px;
	background: rgba(255,255,255,0.03); }
.sr-client h3 { font-size: 20px; margin: 0 0 8px; }
.sr-client p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.62); margin: 0; }
.sr-client-metric { margin-top: 14px !important; color: rgba(255,255,255,0.78) !important; }
.sr-client-metric strong { color: #ffffff; font-size: 17px; }
/* The badge says a filmed testimonial exists, so the card does not have to claim it in prose. */
.sr-video-tag { display: inline-block; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
	font-weight: 700; color: var(--accent-ltr); border: 1px solid rgba(174,162,224,0.34); border-radius: 999px;
	padding: 4px 11px; margin: 0 0 12px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.hdr-nav { gap: 22px; font-size: 15px; }
	.hdr-item.mega .hdr-panel { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; }
}
@media (max-width: 880px) {
	/* The phone menu. Hover cannot open a dropdown on a touch screen, so the panel drops
	   below the bar and every list inside it sits open: eighteen services and six
	   industries stay reachable in one tap instead of none. */
	.sr-nav-bar { gap: 14px; }
	.sr-nav-bar .wp-block-site-logo img { height: 38px; }
	.sr-nav-bar .wp-block-buttons { display: none; }        /* the CTA repeats at the end of the panel */
	.sr-nav-toggle { display: inline-flex; }
	/* Anchored to the viewport, not sized by a guess at the bar height: --sr-bar-h is the
	   bar's measured bottom, written by nav.js. Sizing it as 100vh minus a guessed 90px
	   pushed the last item, the CTA, below the fold with no way to reach it. */
	.hdr-nav { position: fixed; top: var(--sr-bar-h, 90px); bottom: 0; left: 0; right: 0; z-index: 60;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #ffffff; border-top: 1px solid rgba(0,0,0,0.08);
		box-shadow: 0 24px 60px rgba(0,0,0,0.45);
		padding: 6px var(--wp--style--root--padding-right) 28px var(--wp--style--root--padding-left);
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
	.sr-nav-shell.is-collapsed .hdr-nav { display: none; }
	.hdr-top { padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.07); justify-content: space-between; }
	.hdr-item { position: static; }
	.hdr-item > .hdr-top svg { display: none; }              /* nothing to rotate: the lists are already open */
	.hdr-menu, .hdr-item.mega > .hdr-menu { position: static; transform: none; visibility: visible; opacity: 1;
		padding: 0; left: auto; right: auto; }
	.hdr-panel, .hdr-item.mega .hdr-panel { display: block; background: transparent; border: 0; box-shadow: none;
		padding: 6px 0 14px 2px; min-width: 0; }
	.hdr-head { margin: 14px 0 4px; }
	.hdr-panel a.hdr-link { padding: 7px 0; }
	.hdr-foot { border-top: 0; margin-top: 6px; padding-top: 4px; }
	.hdr-cta-mobile { display: block; margin-top: 18px; background: var(--ink); color: #ffffff; text-align: center;
		border-radius: 6px; padding: 15px 18px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
		text-transform: uppercase; text-decoration: none; }
	.hdr-cta-mobile:hover { color: #ffffff; background: var(--accent); }
	.sr-foot { gap: 24px; }
}
@media (max-width: 640px) {
	.sr-page { padding-top: 40px; padding-bottom: 64px; }
	.sr-post-cta { padding: 26px 22px; }
}