/* ==========================================================================
   Self-hosted fonts.

   Previously five families were pulled from fonts.googleapis.com: 122
   @font-face blocks across 35 static files. Two of those families (Geist,
   Poppins) powered three CSS rules between them.

   Now three families as variable woff2, served from this origin. That removes
   two cross-origin handshakes (googleapis for the CSS, then gstatic for the
   files) from the critical path - on mobile that is a DNS lookup plus a TLS
   negotiation before any text can paint.

   latin-ext is declared but its unicode-range means a browser only fetches it
   if the page actually contains those characters. English pages load ~104KB
   for all three families.

   To re-generate: request the css2 API with a modern UA, keep the latin and
   latin-ext blocks, and download each distinct src URL once - Google serves
   one variable file per family+subset, repeated across the weight list.
   ========================================================================== */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Media Catalyst — base + tokens
   ========================================================================== */
:root {
	--ink: #0b0b0d;
	--ink-soft: #4b4d55;
	--muted: #6b7280;
	--bg-soft: #f4f5f7;
	--bg-blue: #eef2fb;
	--line: #e6e7eb;
	--accent: #f2622d;
	--accent-2: #ff8a4c;
	--radius-lg: 20px;
	--radius-md: 14px;
	--radius-sm: 10px;
	--container: 1180px;
	font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ink);
	background: #fff;
	line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; }
p { margin: 0 0 1em; color: var(--muted); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 16px; }
.eyebrow .dash { width: 14px; height: 1px; background: currentColor; display: inline-block; }
.eyebrow-light { color: rgba(255,255,255,.7); }

.section-lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 560px; }
.section-body { max-width: 640px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: .95rem;
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1c1c1f; }
.btn-outline { background: #f1f2f4; color: var(--ink); }
.btn-outline:hover { background: #e6e7eb; }
.btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; }
.btn-arrow svg { transition: transform .2s ease; }
.btn-arrow:hover svg { transform: translateX(3px); }
.link-underline { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 18px; border-radius: 999px; font-size: .85rem; font-weight: 600;
	border: 1px solid var(--line); color: var(--ink);
}
.pill-link { background: #fff; }
.pill-outline-light { border-color: rgba(255,255,255,.25); color: #fff; }
.accent { color: var(--accent); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.site-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }
.site-logo-img { height: 32px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: .95rem; }
.primary-nav { flex: 1; display: flex; justify-content: center; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-toggle { display: none; }

/* ==========================================================================
   Hero — 1:1 with the Figma frame.
   Source geometry (px, at the 1440 design width): card 1399x820 r30,
   content inset 42/61, columns 700 + 26 gap + 588, media rows 275/281 + 18 + 216.
   Percentages below are those numbers over their container so the block
   scales proportionally on narrower viewports.
   ========================================================================== */
.hero { padding: 42px 20px 0; }
.hero-card {
	max-width: 1399px; margin: 0 auto; padding: 61px 42px;
	border-radius: 30px;
	background: linear-gradient(180deg, #F5F5F5 1%, #FFFFFF 64%);
}
/* minmax(0,…) so the fr ratio is honoured exactly — grid items default to
   min-width:auto, which otherwise lets content widen a column off-spec. */
.hero-inner { display: grid; grid-template-columns: minmax(0,700fr) minmax(0,588fr); column-gap: 26px; align-items: start; }

/* ---- left column ---- */
/* Figma places the H1 box 67px into the column; Plus Jakarta Sans carries more
   internal leading than Nexa, so 51px lands the glyphs on the authored line. */
.hero-copy { padding-top: 51px; }
.hero-copy h1 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 72px; line-height: 79px; font-weight: 700; letter-spacing: -.02em;
	color: #010205; margin: 0; max-width: 700px;
}
.hero-lead {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 26px; font-weight: 500; color: #6E7173;
	max-width: 550px; margin: 48px 0 0;
}
.hero-cta { display: flex; align-items: center; gap: 56px; margin-top: 64px; }
.hero-btn {
	display: inline-flex; align-items: center; gap: 42px;
	height: 56px; padding: 0 32px; border-radius: 70px;
	background: #010205; color: #fff;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 16px; font-weight: 700; white-space: nowrap;
}
.hero-btn svg { flex-shrink: 0; }
.hero-caselink {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 16px; font-weight: 700; color: #010205;
	text-decoration: underline; text-underline-offset: 5px;
}

/* ---- right column ---- */
.hero-media {
	position: relative; padding-top: 32px;           /* badge overhangs the photo by 32px */
	display: grid; grid-template-columns: minmax(0,303fr) minmax(0,259fr);
	column-gap: 24px; row-gap: 18px; align-items: start;
}
.hero-photo { aspect-ratio: 303 / 275; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-stat {
	aspect-ratio: 259 / 281; background: #F0F0F0; border-radius: 20px;
	padding: 38px 24px 40px; display: flex; flex-direction: column;
}
.hero-stat-num {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 84px; line-height: .75; font-weight: 700; color: #010205; display: block;
}
.hero-stat p {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 16px; line-height: 24px; font-weight: 500; color: #5C5D5F; margin: 30px 0 0;
}
.hero-progress { margin-top: auto; height: 4px; border-radius: 2px; background: #D5D5D5; overflow: hidden; }
.hero-progress span { display: block; width: 66.8%; height: 100%; background: #010205; border-radius: 2px; }

.hero-dark {
	grid-column: 1 / -1; position: relative; overflow: hidden;
	aspect-ratio: 588 / 216; background: #010205; border-radius: 20px;
}
.hero-dark-swirl { position: absolute; left: -30.78%; top: -49.54%; width: 85.54%; height: 270.37%; object-fit: cover; opacity: .55; }
.hero-dark-copy { position: absolute; left: 5.61%; top: 22.22%; width: 52%; z-index: 1; }
.hero-eyebrow {
	display: flex; align-items: center; gap: 13px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap;
}
.hero-eyebrow i { width: 54px; height: 1px; background: #fff; flex-shrink: 0; }
.hero-dark-copy h3 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	/* Figma is 32/42 in Nexa; PJS runs wider, so 30/40 keeps the authored
	   two-line break inside the 588x216 card instead of spilling to three. */
	font-size: 30px; line-height: 40px; font-weight: 700; color: #fff; margin: 32px 0 0;
}
.hero-bars {
	position: absolute; left: 57.65%; bottom: 0; width: 38.61%; height: 76.85%;
	display: flex; align-items: flex-end; gap: 4.4%; z-index: 1;
}
.hero-bars i { width: 30.4%; display: block; }
.hero-bars .bar-1 { height: 57.23%; background: #FFC3B1; }
.hero-bars .bar-2 { height: 81.93%; background: #FB9374; }
.hero-bars .bar-3 { height: 100%;   background: #F76236; }

.hero-badge {
	position: absolute; top: 0; left: 26.36%; width: 18.37%; aspect-ratio: 1;
	border-radius: 50%; background: #010205; color: #F76236;
	display: flex; align-items: center; justify-content: center; z-index: 2;
}
.hero-badge svg { width: 44.4%; height: 44.4%; }

/* ---- trusted-by strip (lives inside the hero card) ---- */
.hero-trusted { margin-top: 49px; text-align: center; }
.hero-trusted p {
	font-family: 'Inter', sans-serif;
	font-size: 15px; line-height: 25px; font-weight: 400; color: #12203F; margin: 0 0 21px;
}
.hero-logos {
	display: flex; align-items: center; justify-content: center;
	max-width: 842px; margin: 0 auto; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 127px, #000 calc(100% - 127px), transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 127px, #000 calc(100% - 127px), transparent);
}
.hero-logo { width: 130px; height: 45px; object-fit: contain; flex-shrink: 0; filter: grayscale(1); }

/* ==========================================================================
   Trusted logos
   ========================================================================== */
.trusted { padding: 48px 0; }
.trusted-label { text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 24px; }
.trusted-logos { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; opacity: .55; font-weight: 700; letter-spacing: .02em; }
.trusted-logo { height: 24px; width: auto; object-fit: contain; filter: grayscale(1); }

/* ==========================================================================
   About — 1:1 with Figma. Container 1348; heading 54/48; copy 734 wide;
   stats row 1363 wide (gap 171); photo 1200x582 r24, 64px below the stats.
   ========================================================================== */
.about { padding: 19px 20px 0; }
.about-inner { max-width: 1348px; margin: 0 auto; text-align: center; }
.about h2 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 54px; line-height: 48px; font-weight: 700; color: #1B1A1A; margin: 0;
}
.about-copy { max-width: 734px; margin: 32px auto 0; }
.about-copy p {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 26px; font-weight: 500; color: #6E7173; margin: 0;
}
.about-copy p + p { margin-top: 26px; }   /* the blank line in the Figma text block */

.about-metrics {
	list-style: none; margin: 42px 0 0; padding: 0;
	/* Centred with a fixed gap rather than space-between, which pinned the four
	   items to the edges of a 1348px container and left them reading as four
	   unrelated things instead of one row. */
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px 52px;
}
.about-metrics li {
	display: flex; align-items: center; gap: 12px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 16px; line-height: 24px; font-weight: 700; color: #616161; white-space: nowrap;
}
.about-metric-icon {
	width: 38px; height: 38px; border-radius: 50%; background: #DDC6BA; color: #1B1A1A;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.about-metric-icon svg { width: 20px; height: 20px; }

/* 64px left the metrics row sitting almost on top of the photograph; the row
   needs enough air to read as the end of the copy block rather than a caption
   for the image below it. */
.about-photo { max-width: 1200px; margin: 104px auto 0; padding: 0 20px; }
.about-photo img { width: 100%; aspect-ratio: 1200 / 582; object-fit: cover; border-radius: 24px; background: #d8dadf; }

/* ==========================================================================
   Services + case studies — Figma: full-bleed #000, 1280 content column,
   rows 104 tall with 150x40 r18 swatches, cards 624x627 r24 in a 2x2 grid.
   ========================================================================== */
.svc { background: #000; color: #fff; margin-top: 133px; padding: 48px 0 0; }
.svc-inner { max-width: 1313px; margin: 0 auto; padding: 0 20px; }
.svc-eyebrow {
	display: flex; align-items: center; gap: 8px; height: 38px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 22px; line-height: 38px; font-weight: 700; color: #fff;
}
.svc-eyebrow svg { flex-shrink: 0; }

.svc-list { list-style: none; margin: 40px 0 0; padding: 0; }
.svc-list li {
	display: flex; align-items: center; gap: 32px;
	height: 104px; border-bottom: 1px solid #282828;
}
.svc-swatch { width: 150px; height: 40px; border-radius: 18px; object-fit: cover; flex-shrink: 0; }
.svc-name {
	flex: 1; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 34px; line-height: 40px; font-weight: 700; color: #fff;
}
.svc-plus { color: #9D9FA1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; }

/* ---- case studies ---- */
.svc-cases { padding-top: 91px; padding-bottom: 16px; }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.case { border-radius: 24px; overflow: hidden; background: #000; }
.case-top { position: relative; aspect-ratio: 624 / 513; padding: 32px; background: #DCDCE7; overflow: hidden; }
/* max-width:none so the Figma offsets below can exceed the card box —
   the global `img { max-width: 100% }` would otherwise clamp them. */
.case-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Elite card: light panel, artwork inset at y=155 of 513 and 658 wide (105.4%) */
.case--panel .case-top { background: #DCDCE7; }
.case--panel .case-art {
	inset: auto; top: 30.2%; left: 0; width: 105.4%; height: 83%;
	object-fit: cover; object-position: top center;
}
/* Nayzak: Figma places the 1145x1088 artwork at -248,-275 inside the 624x513
   card, so it reads much tighter than a centre crop. Those offsets as
   percentages of the card reproduce the authored framing exactly. */
.case--nayzak .case-art {
	inset: auto; left: -39.74%; top: -53.61%; width: 183.49%; height: 212.09%;
	object-fit: cover;
}
.case-top h3 {
	position: relative; z-index: 1; margin: 0;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 36px; line-height: 36px; font-weight: 700; color: #051720;
}
/* Crave Chips / Nayzak set their title in white over darker artwork */
.case--white-title .case-top h3 { color: #fff; }
.case-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 26px; }
.case-tags span {
	display: inline-flex; align-items: center; gap: 8px;
	height: 37px; padding: 0 15px 0 13px; border-radius: 21px; background: #F7F7F9;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 18px; line-height: 26px; font-weight: 700; color: #051720; white-space: nowrap;
}
.case-tags i { width: 8px; height: 8px; border-radius: 50%; background: #051720; flex-shrink: 0; }
.case-info {
	padding: 40px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 28px; line-height: 34px; font-weight: 700; color: #fff;
}

.case-all {
	display: flex; align-items: center; justify-content: center;
	height: 62px; margin-top: 32px; border: 2px solid #282828; border-radius: 39px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 20px; line-height: 34px; font-weight: 700; color: #fff;
}

/* ==========================================================================
   Why choose us — Figma: 1200 wide, 4 cards of 237 on a ~314 pitch, each one
   stepped 50px lower than the last, with a full-height rule before each.
   ========================================================================== */
.why { padding: 100px 20px 0; }
.why-inner { max-width: 1200px; margin: 0 auto; position: relative; min-height: 400px; padding-top: 64px; }
/* Full-height rules at the Figma x positions (0 / 315 / 629 / 938 of 1200) */
.why h2 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 42px; line-height: 56px; font-weight: 700; color: #000; margin: 0 0 37px;
	position: relative;
}
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; position: relative; }
.why-card {
	padding: 0 24px;
	margin-top: calc(var(--step) * 33px);      /* the staircase */
}
.why-icon {
	width: 50px; height: 50px; border-radius: 9px; background: #E7E7E7; color: #000;
	display: flex; align-items: center; justify-content: center; margin-bottom: 26px;
}
.why-card h3 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 18px; line-height: 18px; font-weight: 700; color: #12141D; margin: 0 0 16px;
}
.why-card p {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 12px; line-height: 22px; font-weight: 700; color: #797979; margin: 0 0 24px; max-width: 205px;
}
.why-more {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 12px; line-height: 25px; font-weight: 700; color: #000;
}

/* ==========================================================================
   Blog teaser
   ========================================================================== */
.blog-teaser-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.blog-teaser-head h2 { font-size: 1.9rem; margin-top: 12px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { display: block; }
.blog-thumb { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: #d8dadf; margin-bottom: 16px; }
.blog-thumb img, .blog-thumb .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.blog-meta { display: flex; gap: 10px; align-items: center; font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.blog-meta .tag { border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; }
.blog-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.blog-excerpt { font-size: .9rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials h2.center { max-width: 560px; margin-bottom: 40px; font-size: 1.8rem; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { background: var(--bg-blue); border-radius: var(--radius-lg); padding: 28px; }
.testimonial-quote { font-size: .92rem; color: var(--ink-soft); }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #cbd5e1; display: block; overflow: hidden; }
.avatar img, .avatar .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.stars { color: #f5a623; font-size: .85rem; }
.testimonial-nav { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.carousel-arrow {
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
	cursor: pointer; font-size: 1rem;
}
.carousel-arrow-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================================
   CTA / contact
   ========================================================================== */
.cta-card { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 48px; }
.cta-copy h2 { color: #fff; font-size: 2.1rem; margin-top: 12px; }
.cta-copy .accent { color: var(--accent); }
.cta-lead { color: rgba(255,255,255,.7); max-width: 420px; margin-left: auto; }
.cta-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.cta-copy { flex: 1 1 320px; }
.cta-form { flex: 1 1 100%; margin-top: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field label { display: block; font-size: .8rem; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.form-field input {
	width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--radius-sm); padding: 12px 14px; color: #fff; font-size: .9rem;
}
.form-field input::placeholder { color: rgba(255,255,255,.35); }

/* ==========================================================================
   Home: Blog / Testimonials / CTA — rebuilt 1:1 from Figma. Scoped to the
   home section classes so the other page templates keep their own styling.
   ========================================================================== */
/* `section.blog`, never a bare `.blog`. WordPress puts "blog" in the body class
   on the posts page, so `.blog { padding: 100px … }` matched <body> on /blog/
   and pushed the header 100px down the page - the header looked wrong there and
   nowhere else. Every `.blog` ancestor selector below is scoped for the same
   reason. */
section.blog { padding: 100px 20px 0; }
.blog-inner { max-width: 1345px; margin: 0 auto; }
.blog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.blog-pill {
	display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px;
	background: #fff; border: 1px solid var(--line);
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #051720;
}
.blog-head h2 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 42px; line-height: 48px; font-weight: 700; color: #051720; margin: 24px 0 7px; max-width: 821px;
}
.blog-head > div > p {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 28px; font-weight: 400; color: #6E7173; margin: 0; max-width: 821px;
}
.blog-more {
	display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
	height: 55px; padding: 0 24px; border-radius: 78px; border: 1px solid var(--line); background: #fff;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: #051720;
}
section.blog .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 32px; }
section.blog .blog-card { background: #fff; border-radius: 29px; padding: 18px; display: block; }
section.blog .blog-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 17px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 10px; line-height: 16px; color: #697586;
}
section.blog .blog-meta em {
	font-style: normal; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 9px; font-weight: 700;
	color: #051720; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
section.blog .blog-thumb { border-radius: 25px; overflow: hidden; aspect-ratio: 379 / 257; background: #d8dadf; margin: 0 0 25px; }
section.blog .blog-card h3 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 21px; line-height: 21px; font-weight: 700; color: #051720; margin: 0 0 8px;
}
section.blog .blog-card p {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 12px; line-height: 18px; font-weight: 400; color: #697586; margin: 0;
}

/* ---- testimonials ---- */
.quotes { padding: 100px 20px 0; }
.quotes-inner { max-width: 1200px; margin: 0 auto; }
.quotes h2 {
	font-family: 'Inter', sans-serif; font-size: 40px; line-height: 48px; font-weight: 400;
	color: #000; text-align: center; margin: 0 auto; max-width: 560px;
}
.quotes-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 21px; margin-top: 99px; }
.quote { background: #F1F4F8; border-radius: 29px; padding: 30px 29px; display: flex; flex-direction: column; min-height: 499px; }
.quote > p {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 21px; line-height: 30px; font-weight: 400; color: #000; margin: 0;
}
.quote-by { display: flex; align-items: center; gap: 15px; margin-top: auto; padding-top: 32px; }
.quote-avatar { width: 43px; height: 43px; border-radius: 50%; overflow: hidden; background: #cbd5e1; flex-shrink: 0; }
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* the third testimonial has no photo in the Figma source — keep it neutral */
.quote-avatar .img-placeholder { width: 100%; height: 100%; background: #CBD5E1; }
.quote-by strong {
	display: block; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 18px; line-height: 26px; font-weight: 400; color: #000;
}
.quote-stars { color: #FFC250; font-size: 12px; letter-spacing: 1px; }
.quotes-nav { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.quotes-nav button {
	width: 49px; height: 49px; border-radius: 50%; border: 1px solid var(--line);
	background: #fff; cursor: pointer; font-size: 16px; color: #051720;
}
.quotes-nav .is-active { background: #010205; border-color: #010205; color: #fff; }

/* ---- CTA (home only) ---- */
.cta-home { padding: 100px 20px 0; }
/* Home alone needs the wider run-in: its quotes block sits higher than on the
   inner pages, which share the 100px. */
.home .cta-home { padding-top: 149px; }
.cta-home .cta-card {
	display: block; position: relative; overflow: hidden;
	max-width: 1342px; margin: 0 auto; padding: 43px 91px 35px;
	background: #000; border-radius: 26px; color: #fff;
}
/* Decorative stroke that sits behind the form panel and bleeds off the right
   edge — Figma: 485x234 at x=947/y=418, #FFF stroke 17px at 12% opacity. */
.cta-wave {
	position: absolute; left: 70.57%; top: 57.8%; width: 36.14%; height: 32.36%;
	pointer-events: none; z-index: 0;
}
.cta-home .cta-head, .cta-home .cta-form { position: relative; z-index: 1; }
/* Figma: copy column 560 wide, lead 585, matching the 1342 card */
/* Figma: copy column 560 wide, lead 585 starting at x=784 of the 1342 card */
.cta-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; flex-wrap: wrap; }
.cta-home .cta-copy { flex: 1 1 520px; min-width: 0; }
.cta-home .cta-lead { flex: 1 1 420px; min-width: 0; }
.cta-pill {
	display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px;
	background: #2A241F; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 20px; font-weight: 700; color: #fff;
}
.cta-home .cta-copy h2 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 75px; line-height: 83px; font-weight: 700; color: #fff; margin: 24px 0 0;
}
/* Figma: orange blob 130x57 (fully rounded) with a white 4px arrow that
   overlaps it and breaks out past the top-right corner. */
.cta-mark {
	position: relative; display: inline-block; vertical-align: middle;
	width: 130px; height: 57px; margin: 0 6px; border-radius: 40px; background: #F76236;
}
.cta-mark svg {
	position: absolute; left: 12px; top: -26px; width: 148px; height: 82px; overflow: visible;
}
.cta-home .cta-lead {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 25px; line-height: 35px; font-weight: 400; color: #6E7173;
	max-width: 585px; margin: 81px 0 0;
}
/* Dark form panel, matching the CTA treatment used across the site */
.cta-home .cta-form {
	background: #0E0E0E; border: 1px solid rgba(255,255,255,.09); border-radius: 20px;
	padding: 32px 43px; margin-top: 47px;
}
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.cta-field label {
	display: block; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 28px; color: #9AA3AF; margin-bottom: 10px;
}
.cta-field span {
	display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
	background: #151515; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #6B7280;
}
.cta-field input {
	flex: 1; min-width: 0; border: none; outline: none; background: none;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 16px; color: #fff;
}
.cta-field input::placeholder { color: #5C6270; }
.cta-submit {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	width: 382px; max-width: 100%; height: 60px; margin: 9px auto 0; padding: 0 10px 0 28px;
	border: none; border-radius: 120px; background: #F76236; color: #fff; cursor: pointer;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 20px; line-height: 26px; font-weight: 700;
}
.cta-submit svg {
	flex-shrink: 0; width: 38px; height: 38px; padding: 9px; border-radius: 50%;
	background: #1A1A1A; color: #fff;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #fff; padding: 56px 0 0; margin-top: 64px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo span { color: #fff; }
.footer-nav .nav-menu { gap: 24px; }
.footer-subscribe { display: flex; }
.footer-subscribe input { background: rgba(255,255,255,.08); border: none; border-radius: 999px 0 0 999px; padding: 12px 18px; color: #fff; min-width: 220px; }
.footer-subscribe button { background: var(--accent); border: none; color: #fff; font-weight: 600; padding: 12px 20px; border-radius: 0 999px 999px 0; cursor: pointer; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font-size: .85rem; color: rgba(255,255,255,.6); flex-wrap: wrap; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   About — 1:1 with the Figma "About" frame (28:1330, 1440x4772).
   Hero card 1399x881 r30; content frame 1369x849. Numbers in the comments are
   the authored Figma values so these can be re-checked against the file.
   ========================================================================== */
.ahero { padding: 49px 20px 0; }
.ahero-card {
	position: relative; max-width: 1399px; margin: 0 auto; border-radius: 30px;
	/* Content frame 1369 sits at x=39 in a card spanning 21..1420 — the insets
	   are 18 left / 12 right, not symmetric. */
	padding: 50px 12px 0 18px; overflow: hidden;
	background: linear-gradient(180deg, #F5F5F5 1%, #FFFFFF 64%);
}

/* Heading 1151x162 at x=109 of the 1369 content frame, Nexa 56/85 w700. */
.ahero-title {
	max-width: 1151px; margin: 0 auto; text-align: center;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 56px; line-height: 85px; font-weight: 700; color: #000;
}
/* Inline chip: black pill 164x61 with the device image 163x74 riding 28px above it. */
.ahero-chip { position: relative; display: inline-block; width: 164px; height: 61px; vertical-align: middle; }
.ahero-chip-pill { position: absolute; inset: 0; border-radius: 999px; background: #000; }
/* Image node is 163x74 at x=649,y=-26 against a pill at x=641,y=2 — so it sits
   8px in from the pill's left, overhangs the right by 7, and its bottom stops
   15px above the pill's. height:auto let it render at its natural 163x131,
   which towered over the pill and left the pill's right end sticking out. */
.ahero-chip img {
	position: absolute; left: 8px; top: -28px; width: 163px; height: 74px;
	max-width: none; object-fit: cover; object-position: center 42%;
}

/* Lead 730x64 centred, Source Sans 3 24/32 #5A5A5A, 24px under the heading. */
.ahero-lead {
	max-width: 730px; margin: 24px auto 0; text-align: center;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 24px; line-height: 32px; font-weight: 400; color: #5A5A5A;
}

/* CTA row 419x56, 54px below the copy block; button 233x56 r70, gap 56. */
.ahero-cta { display: flex; align-items: center; justify-content: center; gap: 56px; margin-top: 54px; }
.ahero-caselink {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 16px; line-height: 28px; font-weight: 700; color: #010205;
	text-decoration: underline; text-underline-offset: 5px;
}
.ahero-caselink:hover { opacity: .7; }

/* Bottom row 1369x439 at y=410: cards of 438 + 874 with a 31 gap total 1343, so
   Figma leaves 26px of slack on the right that the play button reaches into.
   Percentages of the 1369 frame keep that slack instead of stretching the
   columns to fill, which would push the button past the card edge. */
.ahero-row {
	display: grid; grid-template-columns: 31.995% 63.842%; column-gap: 2.264%;
	justify-content: start; margin-top: 42px; padding-bottom: 46px;
}

.ahero-stat { position: relative; border-radius: 30px; background: #000; overflow: hidden; aspect-ratio: 438 / 382; }
.ahero-stat-copy { position: absolute; left: 13.01%; top: 14.4%; }        /* 57 / 55 */
.ahero-years {
	display: block; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 72px; line-height: 72px; font-weight: 700; color: #fff;
}
.ahero-years i { font-style: normal; color: #3FA9F5; }
.ahero-years-label {
	display: block; margin-top: 15px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 19px; line-height: 32px; font-weight: 700; color: #B5B5B6;
}
/* Four 70px avatars on a 77px pitch from x=40, y=266 of the 438x382 card. */
.ahero-avatars { position: absolute; left: 9.13%; top: 69.6%; display: flex; align-items: center; }
.ahero-avatars img {
	width: 70px; height: 70px; border-radius: 50%; object-fit: cover;
	border: 2px solid rgba(255,255,255,.5); margin-right: 7px; background: #D9D9D9;
}
.ahero-avatars-more {
	margin-left: 7px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 74px; line-height: 70px; font-weight: 700; color: #fff;
}
.ahero-swirl { position: absolute; left: -18.5%; top: 32.7%; width: 127.9%; height: auto; }

.ahero-video { position: relative; border-radius: 30px; overflow: visible; aspect-ratio: 874 / 382; }
.ahero-video img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; display: block; }
.ahero-video-title {
	position: absolute; left: 0; right: 0; top: 39%; text-align: center;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 60px; line-height: 85px; font-weight: 700; color: #fff;
}
/* Play button 140x140 at x=1229,y=709 of the 1369x849 frame — it deliberately
   overhangs the photo's bottom-right corner. */
.ahero-play {
	position: absolute; right: -2.98%; bottom: -14.9%; width: 16.02%; aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
	border: 10px solid #FAFAFA; border-radius: 50%; background: #F76236; cursor: pointer;
}
.ahero-play svg { width: 27%; height: auto; }

/* ==========================================================================
   About — what we do. Track is 1767 wide at x=50, so the 4th card is clipped
   by the viewport exactly as the frame authors it.
   ========================================================================== */
.awwd { overflow: hidden; padding: 114px 0 0; }
.awwd-inner { max-width: 1341px; margin: 0 auto; }
.awwd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.awwd-head-copy { max-width: 870px; }
.awwd-head h2 {
	margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 42px; line-height: 62px; font-weight: 700; color: #051720;
}
.awwd-head p {
	margin: 12px 0 0; max-width: 870px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 24px; font-weight: 400; color: #6E7173;
}
.awwd-head-note { margin-top: 22px !important; }
/* Contact Us 193x60 r85, 1px #051720 outline, Nexa 20 w700. */
.awwd-btn {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
	height: 60px; padding: 0 27px; border-radius: 85px; border: 1px solid #051720;
	background: #fff; color: #051720; text-decoration: none;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 20px; font-weight: 700;
}
.awwd-btn:hover { background: #051720; color: #fff; }

/* Cards 431x248 r12 on a 455 pitch. */
.awwd-track { display: flex; gap: 24px; margin-top: 64px; }
.awwd-card {
	flex: 0 0 431px; border-radius: 12px; background: #fff; border: 1px solid #ECECF0;
	padding: 36px 28px;
}
.awwd-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 10px; background: #fff; border: 1px solid #ECECF0;
}
.awwd-card h3 {
	margin: 14px 0 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 30px; line-height: 30px; font-weight: 700; color: #051720;
}
.awwd-card p {
	margin: 14px 0 0; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 28px; font-weight: 400; color: #6E7173;
}

/* Two 49px arrows centred on the page (Figma centres them at x=721 of 1440). */
.awwd-arrows { display: flex; justify-content: center; gap: 8px; margin-top: 38px; }
.awwd-arrow {
	width: 49px; height: 49px; border-radius: 58px; border: 1px solid #262626;
	background: transparent; color: #262626; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.awwd-arrow--solid { background: #000; border-color: #000; color: #fff; }
.awwd-arrow:hover { opacity: .82; }

/* ==========================================================================
   About — bento stats. Left block 614x602 (four 302x295 r24 tiles on a
   312/307 pitch); right block two 637x287 r30 panels on a 307 pitch.
   ========================================================================== */
.abento { padding: 92px 20px 0; }
.abento-inner {
	max-width: 1296px; margin: 0 auto;
	display: grid; grid-template-columns: minmax(0,614fr) minmax(0,637fr); gap: 45px;
	align-items: start;
}
.abento-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 10px; }
.abt { display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 302 / 295; }
.abt img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Right panels 637x287 r30 — mission is the dark gradient, why is #F1F4F8. */
.abento-panels { display: grid; gap: 20px; }
.apanel { position: relative; border-radius: 30px; padding: 44px 33px; min-height: 287px; }
.apanel--mission { background: linear-gradient(135deg, #14181B 0%, #000000 100%); }
.apanel--why { background: #F1F4F8; }
.apanel h3 {
	margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 30px; line-height: 34px; font-weight: 700;
}
.apanel--mission h3 { color: #fff; }
.apanel--why h3 { color: #023047; }
.apanel p {
	margin: 22px 0 0; max-width: 569px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 26px; font-weight: 400; color: #6E7173;
}
/* 57x57 r20 corner link, 16px in from the top-right. */
.apanel-link {
	position: absolute; right: 16px; top: 16px; width: 57px; height: 57px; border-radius: 20px;
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.apanel--mission .apanel-link { background: #fff; color: #023047; }
.apanel--why .apanel-link { background: #000; color: #fff; }
.apanel-link:hover { transform: translate(1px,-1px); }

/* ==========================================================================
   About — testimonials. Group 1200x747; cards 386x499 r29 on a 407 pitch.
   ========================================================================== */
.aquotes { padding: 153px 20px 156px; }
.aquotes-inner { max-width: 1200px; margin: 0 auto; }
.aquotes h2 {
	margin: 0; text-align: center;
	font-family: 'Inter', sans-serif; font-size: 40px; line-height: 48px; font-weight: 400; color: #000;
}
.aquotes-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 21px; margin-top: 67px; }
.aquote {
	position: relative; border-radius: 29px; background: #F1F4F8; padding: 30px 29px;
	min-height: 499px; display: flex; flex-direction: column;
}
.aquote > p {
	margin: 0; max-width: 300px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 21px; line-height: 30px; font-weight: 400; color: #000;
}
.aquote-by { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.aquote-by img { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; background: #D9D9D9; }
/* Keep the mc_img() fallback inside the avatar slot when an asset is missing —
   otherwise the gradient placeholder expands and blows out the row. */
.aquote-by .img-placeholder { flex: 0 0 43px; width: 43px; height: 43px; border-radius: 50%; }
.aquote-name {
	display: block; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 19px; line-height: 26px; font-weight: 400; color: #000;
}
.aquote-stars { display: inline-flex; gap: 2px; margin-top: 2px; }
.aquotes-arrows { margin-top: 60px; }
/* Portfolio runs its testimonials tighter into the CTA than About does. */
.aquotes.pf-quotes { padding-bottom: 0; }

/* ==========================================================================
   Services page — 1:1 with the Figma "Services" frame.
   hero card 1399x1013 r30 | black grid 1440x1478 with 417x498 r23 cards
   | Why block 1341 wide with 431x248 r12 cards over an #F1F4F8 band.
   ========================================================================== */
.shero { padding: 42px 20px 0; }
.shero-card {
	max-width: 1399px; margin: 0 auto; padding: 67px 100px 86px;
	border-radius: 30px; text-align: center;
	background: linear-gradient(180deg, #F5F5F5 1%, #FFFFFF 64%);
}
.shero-card h1 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 54px; line-height: 60px; font-weight: 700; color: #1B1A1A;
	max-width: 692px; margin: 0 auto;
}
.shero-lead {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 20px; line-height: 28px; font-weight: 700; color: #616161;
	max-width: 800px; margin: 24px auto 0;
}
.shero-cta { display: flex; align-items: center; justify-content: center; gap: 56px; margin-top: 54px; }
.shero-banner { margin-top: 54px; border-radius: 24px; overflow: hidden; aspect-ratio: 1200 / 526; background: var(--bg-blue); }
.shero-banner img, .shero-banner .img-placeholder { width: 100%; height: 100%; object-fit: cover; }

/* ---- black services grid ---- */
.sgrid { background: #000; color: #fff; padding: 42px 20px; }
.sgrid-inner { max-width: 1298px; margin: 0 auto; padding: 0; }
.sgrid-pill {
	display: flex; width: fit-content; margin: 0 auto; align-items: center;
	height: 34px; padding: 0 19px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.97); background: #000;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #fff;
}
.sgrid-inner > h2 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 44px; line-height: 60px; font-weight: 700; color: #fff;
	text-align: center; margin: 20px auto 0; max-width: 1170px;
}
.sgrid-mark {
	display: inline-block; vertical-align: middle; width: 115px; margin: 0 6px;
}
.sgrid-mark img { width: 100%; height: auto; display: block; }
.sgrid-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 42px 24px; margin-top: 123px; }
.sgrid-card {
	position: relative; overflow: hidden; border-radius: 23px; background: #E9EDF0;
	aspect-ratio: 417 / 498; padding: 29px 32px;
}
.sgrid-card--accent { background: var(--accent); }
.sgrid-card h3 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 32px; line-height: 32px; font-weight: 700; color: #051720; margin: 0;
}
.sgrid-card p {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 16px; line-height: 21px; font-weight: 400; color: #5A5A5A; margin: 14px 0 0;
}
.sgrid-card--accent h3, .sgrid-card--accent p { color: #fff; }
/* Artwork is authored to overflow the card and clip at its bottom edge (the art
   boxes are 304–354 tall in a 299px region), so bottom:0 + overflow:hidden on
   the card is correct. Offsets below are the Figma x/y of each art node as a
   percentage of its own card, which differ per card. */
/* No bottom/height here on purpose: the art keeps its natural aspect at the
   full authored width and the card clips the overflow. Giving it a height makes
   preserveAspectRatio fit to the shorter axis, which shrank every illustration
   by 8% and centred it. */
.sgrid-art { position: absolute; right: auto; bottom: auto; }
.sgrid-art--web     { left: 0; width: 100%; top: 30%; }
.sgrid-art--seo     { left: 0; width: 100%; top: 30%; }
.sgrid-art--social     { left: 0; width: 100%; top: 30%; }
.sgrid-art--brand     { left: 0; width: 100%; top: 30%; }
.sgrid-art--creative     { left: 0; width: 100%; top: 30%; }
.sgrid-art--paid     { left: 0; width: 100%; top: 30%; }
.sgrid-art img { width: 100%; height: auto; display: block; }
.sgrid-art .img-placeholder { width: 100%; height: 100%; background: rgba(255,255,255,.65); }
.sgrid-svg { width: 100%; height: auto; display: block; }
.sgrid-card--accent .sgrid-art .img-placeholder { background: rgba(255,255,255,.85); }

/* ---- why media catalyst ---- */
.swhy { position: relative; padding: 0 20px; }
.swhy-inner { position: relative; z-index: 1; max-width: 1341px; margin: 0 auto; padding: 90px 0 0; }
.swhy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.swhy-pill {
	display: inline-flex; align-items: center; height: 34px; padding: 0 19px; border-radius: 999px;
	border: 1px solid var(--line); background: #fff;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #051720;
}
.swhy-head h2 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 54px; line-height: 62px; font-weight: 700; color: #051720; margin: 24px 0 12px; max-width: 746px;
}
.swhy-head > div > p {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 24px; line-height: 28px; font-weight: 400; color: #6E7173; margin: 0; max-width: 655px;
}
.swhy-btn {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
	height: 60px; padding: 0 27px; border-radius: 85px; border: 1px solid #051720; background: #fff;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: #051720;
}
.swhy-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 50px; }
.swhy-card { background: #fff; border: 1px solid #ECECF0; border-radius: 12px; padding: 28px; min-height: 248px; }
/* Figma frames each glyph in a soft 44px card, not a tinted block. */
.swhy-icon {
	width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid #F0F0F3;
	display: flex; align-items: center; justify-content: center; margin-bottom: 26px;
}
.swhy-icon img { width: 24px; height: auto; display: block; }
.swhy-card h3 {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 30px; line-height: 30px; font-weight: 700; color: #051720; margin: 0 0 14px;
}
.swhy-card p {
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 20px; line-height: 28px; font-weight: 400; color: #6E7173; margin: 0;
}

/* ==========================================================================
   Portfolio — 1:1 with the Figma "Portfolio" frame (13:2757, 1440x5883).
   Numbers are the authored values from the frame's SVG export, verified
   against a PNG of the same frame.
   ========================================================================== */
.pf-hero { padding: 35px 20px 0; }
.pf-hero-card {
	position: relative; max-width: 1399px; margin: 0 auto; height: 755px;
	border-radius: 30px; overflow: hidden;
	background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 62%);
}
.pf-hero-card h1 {
	margin: 90px 0 0; text-align: center;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 54px; line-height: 59px; font-weight: 700; color: #010205; letter-spacing: 0.027em;
}
.pf-hero-lead {
	margin: 30px auto 0; max-width: 780px; text-align: center;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 23px; line-height: 28px; font-weight: 400; color: #5A5A5A;
}
.pf-hero-cta { display: flex; align-items: center; justify-content: center; gap: 44px; margin-top: 55px; }
.pf-hero-caselink {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 16px; font-weight: 700; color: #010205;
	text-decoration: underline; text-underline-offset: 5px;
}

/* Strip of four 500.3x280.2 photos on a 532.3 pitch beginning at x=-400.2 of
   the card, so it deliberately runs off both edges. */
.pf-strip { position: absolute; left: -421.2px; top: 419px; display: flex; gap: 32px; }
.pf-strip-item {
	flex: 0 0 500.3px; height: 280.2px; border-radius: 27.5px; overflow: hidden;
	background: #B9DEDD;
}
.pf-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Our services — black band 1440x792 at y=977; rows 104 tall from y=1103.
   -------------------------------------------------------------------------- */
.pf-svc { background: #000; margin-top: 77px; padding: 80px 0 42px; }
.pf-svc-inner { max-width: 1313px; margin: 0 auto; padding: 0 20px; }
.pf-svc-eyebrow {
	display: inline-flex; align-items: center; gap: 9px; color: #fff;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 23px; font-weight: 500;
}
.pf-svc-list { list-style: none; margin: 44px 0 0; padding: 0; }
.pf-svc-list li {
	display: flex; align-items: center; height: 104px;
	border-bottom: 1px solid rgba(255,255,255,.16);
}
.pf-svc-list li:first-child { border-top: 1px solid rgba(255,255,255,.16); }
/* 150x40 r18 thumbnail, vertically centred in the 104 row */
.pf-svc-thumb { flex: 0 0 150px; height: 40px; border-radius: 18px; overflow: hidden; }
.pf-svc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-svc-name {
	flex: 1; padding-left: 33px; color: #fff;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 26px; line-height: 32px; font-weight: 600;
}
.pf-svc-plus { flex: 0 0 auto; color: rgba(255,255,255,.85); display: flex; }

/* --------------------------------------------------------------------------
   Case studies — #FAFAFA band; two 589x526 cards on a 609/596 pitch.
   -------------------------------------------------------------------------- */
.pf-cases { background: #FAFAFA; margin-top: 100px; padding: 60px 20px 0; }
.pf-cases-inner { max-width: 1200px; margin: 0 auto; }
.pf-cases-pill {
	display: block; width: 165px; height: 39px; margin: 0 auto;
	border: 1px solid #051720; border-radius: 19.5px; background: #fff;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 17px; line-height: 37px; font-weight: 500; color: #051720; text-align: center;
}
.pf-cases h2 {
	margin: 33px 0 0; text-align: center;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 50px; line-height: 44px; font-weight: 700; color: #051720;
}
.pf-cases-lead {
	margin: 40px auto 0; max-width: 900px; text-align: center;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 24px; line-height: 34px; font-weight: 400; color: #6E7173;
}
.pf-cases-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0,589px));
	gap: 70px 20px; margin-top: 42px; justify-content: center;
}
.pf-case { width: 589px; background: #fff; border-radius: 14px; overflow: hidden; }
.pf-case-art { height: 332px; background: #16233A; }
.pf-case-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-case h3 {
	margin: 28px 0 0; padding: 0 45px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 26px; line-height: 31px; font-weight: 700; color: #051720;
}
.pf-case p {
	margin: 20px 0 0; padding: 0 42px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 15px; line-height: 25px; font-weight: 400; color: #6E7173;
}
/* pills 135.2 x 41.2 r20.6, 1px #A4A4A4, starting 42.4 in from the card */
.pf-case-tags { display: flex; align-items: center; gap: 9.8px; margin: 25px 0 0; padding: 0 42.4px 34px; }
.pf-case-tags span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 135.2px; height: 41.2px; border: 1px solid #A4A4A4; border-radius: 20.6px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 15px; color: #051720;
}
.pf-case-tags em {
	font-style: normal; padding-left: 2px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 15px; color: #051720;
}

/* --------------------------------------------------------------------------
   "Take a Look at What / All Work / We Can Do For You" — the badge is centred
   on the page (x 640..820) with the two statements pushed to the edges.
   -------------------------------------------------------------------------- */
.pf-allwork {
	position: relative; margin: 11px -7px 0 -14px; padding-bottom: 92px;
	display: flex; align-items: flex-start; justify-content: space-between;
}
.pf-allwork-l, .pf-allwork-r {
	display: flex; flex-direction: column;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 70px; line-height: 82px; font-weight: 700; color: #010205;
}
.pf-allwork-r { text-align: right; align-items: flex-end; margin-top: 95px; }
.pf-allwork-rule-row { display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.pf-allwork-rule-row i { display: block; width: 205px; height: 1.5px; background: #A4A4A4; }
.pf-allwork-r .pf-allwork-rule-row i { width: 190px; }
.pf-allwork-badge {
	position: absolute; left: calc(50% + 9px); top: 1px; transform: translateX(-50%);
	width: 180px; height: 180px; border-radius: 50%; background: #F76236;
	display: flex; align-items: center; justify-content: center; text-decoration: none;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 18px; font-weight: 500; color: #fff;
}
.pf-allwork-badge:hover { background: #e0532a; }

/* testimonials sit on white, unlike the About page's band */
.pf-quotes { padding-top: 49px; }
/* ==========================================================================
   Blog archive — 1:1 with the Figma "Blogs" frame (10:161, 1440x3124).
   Authored values are noted inline; grid is 416.2 cards on a 428.5 pitch.
   ========================================================================== */
.bl-hero { padding: 34px 20px 0; }
.bl-hero-card {
	max-width: 1399px; height: 192px; margin: 0 auto; border-radius: 30px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 70%);
}
.bl-hero-card h1 {
	margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 140px; line-height: 140px; font-weight: 400; color: #010205; letter-spacing: -0.02em;
}

/* content column spans the card grid: x 82.9 .. 1356.1 = 1273.2 */
.bl-wrap { max-width: 1297px; margin: 0 auto; padding: 0 20px; }

/* Categories row at y=347: label left, five outlined pills right, rule under. */
.bl-cats {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 42px 0 18px; border-bottom: 1px solid #E6E6E6;
}
.bl-cats-label {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 17px; font-weight: 500; color: #051720;
}
.bl-cats-list { display: flex; gap: 9.8px; }
.bl-cats-list a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 103.1px; height: 21.7px; border: 1px solid #051720; border-radius: 10.8px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 11px; color: #051720; text-decoration: none;
}
.bl-cats-list a:hover { background: #051720; color: #fff; }

/* Cards 416.2 wide on a 428.5 pitch (12.3 gap); rows on a 417 pitch. */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 12.3px; margin-top: 45px; }
.bl-card { width: 100%; padding: 18.8px 18.5px 16px; box-sizing: border-box; }
.bl-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bl-card-meta span {
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 11px; color: #6E7173; white-space: nowrap;
}
.bl-card-meta em {
	font-style: normal; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 138px; height: 19.1px; border: 1px solid #051720; border-radius: 9.5px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 10px; color: #051720;
}
/* 379.2 x 256.7 r24.6, 17.2 below the meta row */
.bl-card-art { display: block; margin-top: 17.2px; border-radius: 24.6px; overflow: hidden; aspect-ratio: 379.2 / 256.7; }
.bl-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card h2 {
	margin: 23px 0 0;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 19px; line-height: 24px; font-weight: 600; color: #051720;
}
.bl-card h2 a { color: inherit; text-decoration: none; }
.bl-card h2 a:hover { text-decoration: underline; }
.bl-card p {
	margin: 12px 0 0;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 12px; line-height: 17px; font-weight: 400; color: #6E7173;
}
.bl-card p a { color: #6E7173; text-decoration: underline; }

/* Note row, rules above and below, "Learn more" pushed right to x=1228. */
.bl-note {
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	margin-top: 44px; padding: 30px 0 34px; border-top: 1px solid #E6E6E6;
}
.bl-note p {
	margin: 0; max-width: 470px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 15px; line-height: 22px; color: #6E7173;
}
.bl-note-more {
	display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 16px; font-weight: 500; color: #051720;
}
.bl-note-more:hover { gap: 14px; }
/* ==========================================================================
   Contact — 1:1 with the Figma "Contact" frame (8:1222, 1440x1500).
   Numbers are the authored values read from the frame's SVG export and
   verified against a 2x PNG of the same frame.
   ========================================================================== */
.ct-hero { padding: 0 20px; }
/* Content column is 1079.5 wide, x 180.8 .. 1260.3 — centred in 1440. */
.ct-inner { position: relative; max-width: 1079.5px; margin: 0 auto; padding-top: 54.5px; }

.ct-eyebrow {
	display: block;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 18px; line-height: 18px; font-weight: 400; color: #000;
}

/* Heading: y 187 and 240.5 → 53.5 line pitch. Grey run then black. */
.ct-title {
	margin: 27px 0 0;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 50px; line-height: 53.5px; font-weight: 700; color: #000;
}
.ct-title-muted { color: #9F9F9F; font-weight: 500; }

/* Three 37.5px rings at x 1222.8 (42 in from the container's right edge),
   y 154.4 / 209.7 / 265 → a 55.3 pitch. */
.ct-social {
	position: absolute; right: 0; top: 20.4px;
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 17.8px;
}
.ct-social a {
	display: flex; align-items: center; justify-content: center;
	width: 37.5px; height: 37.5px; border-radius: 50%;
	border: 0.75px solid #B7B7B7; background: #fff;
}
.ct-social svg { width: 17px; height: 17px; }
.ct-social a:hover { border-color: #1E2532; }

/* Form: three 343.8 columns on a 367.85 pitch (24 gap), each 58.5 tall with a
   1.5px #CACACA rule; the message box is the full 1079.5 and 109.5 tall. */
.ct-form { margin-top: 79px; }
.ct-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.ct-field { display: block; position: relative; }
.ct-field input,
.ct-field textarea {
	display: block; width: 100%; height: 58.5px;
	padding: 12px 0 0 7.7px; margin: 0;
	border: 0; border-bottom: 1.5px solid #CACACA; border-radius: 0;
	background: transparent; box-sizing: border-box;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 18px; line-height: 22px; color: #000;
}
.ct-field textarea { height: 109.5px; resize: vertical; padding-top: 14px; }
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: #000; opacity: 1; }
.ct-field input:focus,
.ct-field textarea:focus { outline: 0; border-bottom-color: #1E2532; }
.ct-field--message { margin-top: 28px; }

/* 136.5 x 42, r3, 36 below the message rule. */
.ct-submit {
	margin-top: 40px; width: 136.5px; height: 42px; border: 0; border-radius: 3px;
	background: #000; color: #fff; cursor: pointer;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 16px; font-weight: 400;
}
.ct-submit:hover { background: #1E2532; }

/* honeypot — off-screen, never shown to a sighted user */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-notice {
	margin: 28px 0 0; padding: 14px 18px; border-radius: 8px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 17px;
}
.ct-notice--ok  { background: #ECF7F0; border: 1px solid #BFE3CD; color: #1C6B3C; }
.ct-notice--err { background: #FDECEC; border: 1px solid #F3C2C2; color: #A02222; }

/* --------------------------------------------------------------------------
   Contact info band — y 701.7, 1440x335.1, topographic pattern over #FAFAFA.
   Lead column at x 181; the two info columns at x 687.5 and 978.5.
   -------------------------------------------------------------------------- */
.ct-info {
	margin-top: 60px; padding: 0 20px;
	background: #FAFAFA url('../img/contact-pattern.png') center/cover no-repeat;
}
.ct-info-inner {
	max-width: 1079.5px; margin: 0 auto; min-height: 335.1px;
	display: grid; grid-template-columns: 506.5px 291px auto; padding: 65.8px 0 0;
}
.ct-info-lead h2 {
	margin: 16px 0 0;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 43px; line-height: 55px; font-weight: 700; color: #000;
}
.ct-info-col h3 {
	margin: 24.5px 0 0;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 17px; line-height: 17px; font-weight: 700; color: #000;
}
/* the 20.3 x 2.3 rule under each column heading, at y 829.5 */
.ct-dash { display: block; width: 20.3px; height: 2.3px; background: #000; margin: 21.5px 0 0; }
.ct-info-value {
	display: block; margin-top: 21px; text-decoration: none;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 19px; line-height: 19px; font-weight: 700; color: #000;
}
.ct-info-value:hover { text-decoration: underline; }
.ct-info-hours {
	margin: 24.5px 0 0;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 15.5px; line-height: 19.5px; font-weight: 400; color: #000;
}
/* ==========================================================================
   Portfolio 2 — 1:1 with the Figma "Portfolio 2" frame (96:7114, 1440x5158).
   A conversion landing page: hero pitch + inline lead form, logo strip,
   stats, 3-step explainer, black benefits band, FAQ.
   ========================================================================== */
/* stripped header on the landing page */
.site-header--bare .header-inner { justify-content: space-between; }
.site-phone {
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #051720;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 15px; font-weight: 600;
}
.site-phone:hover { color: var(--accent); }

.p2-hero { padding: 35px 20px 0; }
.p2-hero-card {
	position: relative; max-width: 1399px; margin: 0 auto; min-height: 542px;
	border-radius: 30px; padding: 73px 0 40px;
	background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 70%);
}
.p2-hero-copy { max-width: 620px; padding-left: 114px; }
.p2-hero-copy h1 {
	margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 46px; line-height: 66px; font-weight: 700; color: #010205;
}
.p2-hero-copy > p {
	margin: 26px 0 0; max-width: 500px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 17px; line-height: 27px; color: #5A5A5A;
}
.p2-hero-cta { display: flex; align-items: center; gap: 34px; margin-top: 62px; }
.p2-caselink {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 15px; font-weight: 700;
	color: #010205; text-decoration: underline; text-underline-offset: 5px;
}
.p2-trust {
	display: flex; align-items: center; gap: 8px; margin: 26px 0 0;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 13px; color: #5A5A5A;
}
.p2-trust b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; color: #010205; }
.p2-stars { display: inline-flex; gap: 1px; }
.p2-trust em { font-style: normal; }

/* 518x473 r27.8 lead form at x=802.9 of the 1399 card */
.p2-form {
	position: absolute; right: 78px; top: 32px; width: 518px;
	background: #fff; border-radius: 27.8px; padding: 30px 30px 34px;
	box-shadow: 0 18px 50px rgba(5,23,32,.08); box-sizing: border-box;
}
.p2-form h2 {
	margin: 0 0 22px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 19px; line-height: 26px; font-weight: 700; color: #051720;
}
.p2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p2-form input {
	width: 100%; height: 43.5px; margin-bottom: 12px; padding: 0 14px; box-sizing: border-box;
	border: 1px solid #E4E7EC; border-radius: 10.6px; background: #fff;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 13px; color: #051720;
}
.p2-form input::placeholder { color: #98A2B3; }
.p2-form input:focus { outline: 0; border-color: #051720; }
.p2-form button {
	width: 100%; height: 43.5px; margin-top: 6px; border: 0; border-radius: 21.7px;
	background: #010205; color: #fff; cursor: pointer;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 15px; font-weight: 600;
}
.p2-form button:hover { background: #1E2532; }

/* trusted-by strip: 1038x45 at x=210, y=729 */
.p2-logos { text-align: center; padding: 93px 20px 0; }
.p2-logos p {
	margin: 0 0 22px; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 13px; color: #6E7173;
}
.p2-logos img { width: 1038px; max-width: 100%; height: auto; opacity: .85; }

/* problem statement + stats */
.p2-pitch { text-align: center; padding: 14px 20px 0; }
.p2-pitch h2 {
	margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 38px; line-height: 50px; font-weight: 700; color: #051720;
}
.p2-pitch > p {
	margin: 28px auto 0; max-width: 620px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 15px; line-height: 26px; color: #6E7173;
}
.p2-pitch-kicker { margin-top: 24px !important; color: #051720 !important; font-weight: 600; }
.p2-stats {
	list-style: none; display: flex; justify-content: center; gap: 74px;
	margin: 46px 0 0; padding: 0; flex-wrap: wrap;
}
.p2-stats li {
	display: flex; align-items: center; gap: 10px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 14px; color: #051720;
}
.p2-stat-ico {
	width: 32px; height: 32px; border-radius: 50%; background: #FDECE4; color: var(--accent);
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px;
}
/* 1200x582 photograph at x=120 */
.p2-shot { max-width: 1200px; margin: 50px auto 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1200 / 582; }
.p2-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* how it works */
.p2-how { padding: 78px 20px 0; }
.p2-how-inner {
	max-width: 1200px; margin: 0 auto;
	display: grid; grid-template-columns: minmax(0,420fr) minmax(0,700fr); gap: 60px; align-items: start;
}
.p2-how-lead h2 {
	margin: 0 0 40px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 30px; line-height: 40px; font-weight: 700; color: #051720;
}
.p2-steps { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px solid #F0F1F3; }
.p2-steps li { display: flex; gap: 14px; padding: 0 0 30px; }
.p2-step-tick { flex: 0 0 auto; margin-top: 2px; }
.p2-steps h3 {
	margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 17px; line-height: 24px; font-weight: 700; color: #051720;
}
.p2-steps p {
	margin: 6px 0 0; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 14px; line-height: 21px; color: #6E7173;
}

/* what you get — black band 1440x390 */
.p2-get { background: #000; color: #fff; margin-top: 170px; padding: 56px 20px 62px; }
.p2-get h2 {
	margin: 0 0 46px; text-align: center;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 30px; font-weight: 700; color: #fff;
}
.p2-get ul {
	list-style: none; margin: 0 auto; padding: 0; max-width: 1240px;
	display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
}
.p2-get li { text-align: center; padding: 0 22px; border-left: 1px dashed rgba(255,255,255,.22); }
.p2-get li:first-child { border-left: 0; }
.p2-get li span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%; background: #FDECE4; color: var(--accent); margin-bottom: 20px;
}
.p2-get li p {
	margin: 0; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 13px; line-height: 20px; color: rgba(255,255,255,.82);
}

.p2-quotes { padding-top: 162px; }
.aquotes.p2-quotes { padding-bottom: 0; }

/* FAQ */
.p2-faq { padding: 80px 20px 0; }
.p2-faq h2 {
	margin: 0 0 40px; text-align: center;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 30px; font-weight: 700; color: #051720;
}
.p2-faq-grid {
	max-width: 1200px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-content: start;
}
.p2-faq-item { background: #F7F8FA; border-radius: 12px; padding: 18px 22px; height: fit-content; }
.p2-faq-item summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #051720;
}
.p2-faq-item summary::-webkit-details-marker { display: none; }
.p2-faq-item summary i {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: #E9EBEF; position: relative;
}
.p2-faq-item summary i::before, .p2-faq-item summary i::after {
	content: ""; position: absolute; left: 50%; top: 50%; background: #051720;
	transform: translate(-50%,-50%);
}
.p2-faq-item summary i::before { width: 10px; height: 1.6px; }
.p2-faq-item summary i::after  { width: 1.6px; height: 10px; }
.p2-faq-item[open] summary i { background: var(--accent); }
.p2-faq-item[open] summary i::before { background: #fff; }
.p2-faq-item[open] summary i::after { opacity: 0; }
.p2-faq-item p {
	margin: 14px 0 0; font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 13px; line-height: 21px; color: #6E7173;
}

@media (max-width: 1100px) {
	.p2-form { position: static; width: auto; margin: 40px 20px 0; }
	.p2-hero-copy { padding-left: 24px; max-width: none; }
	.p2-how-inner { grid-template-columns: 1fr; }
	.p2-get ul { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
	.p2-get li { border-left: 0; }
	.p2-faq-grid { grid-template-columns: 1fr; }
	.p2-hero-copy h1 { font-size: 32px; line-height: 44px; }
}

/* ==========================================================================
   Single post — 1:1 with the Figma "Internal Blog" frame (96:4808, 1440x3740).
   Title column at x=120; body column 1103.5 wide at x=197; callouts #FFF0E5 r30.
   ========================================================================== */
.sp { padding: 50px 20px 0; }
.sp-head { max-width: 1200px; margin: 0 auto; }
.sp-title {
	margin: 0; max-width: 1140px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 42px; line-height: 72px; font-weight: 700; color: #051720;
}
.sp-meta {
	display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
	margin-top: 45px;
	font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 15px; color: #6E7173;
}
.sp-read { color: #3F87FE; }

/* 1200x685 r12 at x=120 */
.sp-hero { max-width: 1200px; margin: 26px auto 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1200 / 685; }
.sp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* body column is 1103.5 wide — narrower than the image above it */
.sp-body {
	max-width: 1160px; margin: 0 auto; padding: 67px 0 0 57px; box-sizing: border-box;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 16px; line-height: 25px; color: #5A5A5A;
}
.sp-body h2 {
	margin: 46px 0 39px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 26px; line-height: 32px; font-weight: 700; color: #051720;
}
.sp-body h2:first-child { margin-top: 0; }
.sp-body h3 {
	margin: 34px 0 16px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 21px; line-height: 27px; font-weight: 700; color: #051720;
}
.sp-body p { margin: 0 0 14px; }
.sp-body ul, .sp-body ol { margin: 6px 0 18px; padding-left: 22px; }
.sp-body li { margin: 0 0 6px; }
.sp-body a { color: #5A5A5A; text-decoration: underline; }
.sp-body a:hover { color: #051720; }
.sp-body img { max-width: 100%; height: auto; border-radius: 12px; }
.sp-body hr { border: 0; border-top: 1px solid #E6E6E6; margin: 40px 0; }

/* peach callout — blockquote or an explicit class */
.sp-body blockquote,
.sp-body .sp-callout {
	margin: 30px 0; padding: 26px 30px; border-radius: 30px; background: #FFF0E5;
	font-size: 15px; line-height: 24px; color: #5A5A5A;
}
.sp-body blockquote p:last-child,
.sp-body .sp-callout p:last-child { margin-bottom: 0; }
/* a callout that opens with a heading is the "Conclusion" variant */
.sp-body blockquote h2, .sp-body blockquote h3,
.sp-body .sp-callout h2, .sp-body .sp-callout h3 { margin-top: 0; }

@media (max-width: 900px) {
	.sp-title { font-size: 30px; line-height: 40px; }
	.sp-body { padding-top: 36px; }
	.sp-meta { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   Image placeholder (mc_img() fallback when an asset hasn't been exported yet)
   ========================================================================== */
.img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.img-placeholder.grad-1 { background: linear-gradient(135deg,#8b3a52,#e06b8f); }
.img-placeholder.grad-2 { background: linear-gradient(135deg,#c084fc,#7c3aed); }
.img-placeholder.grad-3 { background: linear-gradient(135deg,#2563eb,#06b6d4); }
.img-placeholder.grad-4 { background: linear-gradient(135deg,#0f172a,#334155); }
.img-placeholder.grad-5 { background: linear-gradient(135deg,#65a30d,#a3e635); }
.img-placeholder.grad-6 { background: linear-gradient(135deg,#0ea5e9,#38bdf8); }

/* ==========================================================================
   Generic page fallback
   ========================================================================== */
.generic-content { padding: 64px 0; min-height: 40vh; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
	.hero-card { padding: 40px 24px; }
	.hero-inner { grid-template-columns: 1fr; row-gap: 48px; }
	.hero-copy { padding-top: 0; }
	.hero-copy h1 { font-size: 48px; line-height: 54px; }
	.hero-lead { margin-top: 32px; }
	.hero-cta { margin-top: 40px; gap: 32px; }
	.about-stats { justify-content: flex-start; }
	.case-grid { grid-template-columns: 1fr; }
	.svc-name { font-size: 24px; line-height: 30px; }
	.svc-list li { height: 84px; gap: 20px; }
	.svc-swatch { width: 110px; height: 32px; }
	.case-top h3 { font-size: 26px; line-height: 28px; }
	.case-tags span { font-size: 14px; height: 32px; }
	.why-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
	.why-card { margin-top: 0; padding: 0 16px; }
	.why-inner { min-height: 0; }
	.about-metrics { justify-content: center; gap: 20px 32px; }
	.blog-grid, .testimonial-grid { grid-template-columns: 1fr; }
	.form-row { grid-template-columns: 1fr; }
	.ahero-row { grid-template-columns: 1fr; }
	.ahero-stat, .ahero-video { aspect-ratio: auto; min-height: 320px; }
	.ahero-play { right: 4%; bottom: -14%; width: 96px; }
	.abento-inner { grid-template-columns: 1fr; }
	.awwd-card { flex: 0 0 340px; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.swhy-cards { grid-template-columns: 1fr; }
	.sgrid-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.shero-card { padding: 48px 32px 56px; }
	.pf-cases-grid { grid-template-columns: minmax(0,1fr); }
	.pf-case { width: 100%; }
	.pf-allwork { flex-direction: column; gap: 120px; align-items: center; text-align: center; }
	.pf-allwork-r { margin-top: 0; align-items: center; }
	.pf-allwork-badge { position: static; transform: none; margin: 0 auto; }
	.bl-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.ct-row { grid-template-columns: 1fr; }
	.ct-info-inner { grid-template-columns: 1fr 1fr; }
	section.blog .blog-grid { grid-template-columns: 1fr; }
	.quotes-grid { grid-template-columns: 1fr; }
	.quote { min-height: 0; }
	.cta-home .cta-card { padding: 40px 24px; }
	.cta-home .cta-copy h2 { font-size: 44px; line-height: 50px; }
	.cta-home .cta-lead { margin-top: 24px; font-size: 20px; line-height: 28px; }
	.cta-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
	.blog-head h2 { font-size: 32px; line-height: 38px; }
	.quotes h2 { font-size: 30px; line-height: 38px; }
	.quotes-grid { margin-top: 48px; }
	.ct-social { position: static; flex-direction: row; margin-top: 28px; }
	.p2-hero-strip { flex-wrap: wrap; height: auto; }
	.p2-hero-strip-item { flex: 1 1 45%; height: 160px; }
	.p2-cases-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.primary-nav, .header-actions { display: none; }
	.nav-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; }
	.nav-toggle span { width: 22px; height: 2px; background: var(--ink); }
	.hero-copy h1 { font-size: 34px; line-height: 40px; }
	.hero-lead { font-size: 17px; line-height: 24px; }
	.hero-cta { flex-wrap: wrap; gap: 20px; }
	.hero-media { grid-template-columns: 1fr; row-gap: 16px; }
	.hero-photo, .hero-stat { aspect-ratio: auto; }
	.hero-stat { min-height: 240px; }
	.hero-stat-num { font-size: 60px; }
	.hero-dark-copy h3 { font-size: 22px; line-height: 30px; margin-top: 18px; }
	.hero-eyebrow { font-size: 12px; }
	.hero-eyebrow i { width: 28px; }
	.ahero-title { font-size: 32px; line-height: 48px; }
	.ahero-chip { width: 96px; height: 36px; }
	.ahero-chip img { width: 96px; bottom: 9px; left: 4px; }
	.ahero-lead { font-size: 18px; line-height: 26px; }
	.ahero-years { font-size: 46px; line-height: 46px; }
	.ahero-video-title { font-size: 32px; line-height: 44px; }
	.awwd-head { flex-direction: column; }
	.aquotes-grid { grid-template-columns: 1fr; }
	.abento-tiles { grid-template-columns: 1fr; }
	.abt { aspect-ratio: auto; min-height: 280px; }
	section { padding: 48px 0; }
	.footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
	.shero-card h1 { font-size: 34px; line-height: 40px; }
	.sgrid-inner > h2 { font-size: 28px; line-height: 44px; }
	.sgrid-cards { grid-template-columns: 1fr; }
	.sgrid-card { aspect-ratio: auto; min-height: 420px; }
	.swhy-head h2 { font-size: 34px; line-height: 40px; }
	.services-grid { grid-template-columns: 1fr; }
	.swhy-head { flex-direction: column; }
	.shero-cta { flex-wrap: wrap; gap: 24px; }
	.pf-hero-card h1 { font-size: 32px; line-height: 40px; }
	.pf-hero-card { height: auto; padding-bottom: 40px; }
	.pf-strip { position: static; margin-top: 40px; overflow-x: auto; }
	.pf-svc-name { font-size: 19px; padding-left: 18px; }
	.pf-allwork-l, .pf-allwork-r { font-size: 30px; line-height: 38px; }
	.pf-case-tags { flex-wrap: wrap; }
	.blog-hero h1.center { font-size: 3rem; }
	.blog-grid-archive { grid-template-columns: 1fr; }
	.ct-row { grid-template-columns: 1fr; gap: 0; }
	.ct-info-inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
	.ct-title { font-size: 32px; line-height: 40px; }
	.ct-info-lead h2 { font-size: 28px; line-height: 38px; }
	.p2-hero-copy h1 { font-size: 1.8rem; }
	.p2-cases-foot { flex-direction: column; }
	.p2-cases-foot h2 { font-size: 1.8rem; text-align: center; }
}

/* ==========================================================================
   Mobile fixes — added after auditing every page at a real 360/375px viewport.

   Method (repeat it rather than eyeballing): save each page locally, load it in
   an iframe of an exact CSS width so media queries evaluate against that width,
   then walk the DOM for elements whose right edge exceeds documentElement
   .clientWidth. Chrome's headless window has a ~500px floor on Windows, so
   --window-size alone silently lies about narrow viewports.

   Every page scrolled sideways by 47px and the cause was the same on all of
   them: .footer-nav .nav-menu is a non-wrapping flex row 383px wide. Blog was
   worse (350px) from .bl-cats-list. Elements inside .case-top, .awwd and
   .hero-logos also measure wider than the viewport but those are overflow
   hidden marquees, not defects.

   Note: no overflow-x:hidden on html/body. It would paper over exactly the
   bugs fixed below, and it breaks the sticky header in several browsers.
   ========================================================================== */

@media (max-width: 768px) {

	/* --- the site-wide 47px sideways scroll ------------------------------ */
	.footer-nav { width: 100%; }
	.footer-nav .nav-menu { flex-wrap: wrap; gap: 12px 20px; }

	.footer-subscribe { width: 100%; max-width: 420px; }
	.footer-subscribe input { min-width: 0; flex: 1 1 auto; }
	.footer-subscribe button { flex: 0 0 auto; }

	/* --- blog category row: 5 pills in one 555px line -------------------- */
	.bl-card-meta { flex-wrap: wrap; gap: 4px 10px; }
	.bl-card-meta span { white-space: normal; }
	.bl-card-meta em { overflow-wrap: anywhere; }
	.bl-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

	.bl-cats { flex-wrap: wrap; gap: 12px; }
	.bl-cats-list { flex-wrap: wrap; gap: 10px; }

	/* --- the hamburger actually opens a menu now ------------------------- */
	/* Was: JS set an inline display:flex, which reopened the horizontal
	   desktop row squeezed into the header. Now it toggles .nav-open and the
	   panel drops below the header as a normal vertical list. */
	/* Both panels flow in the header rather than being absolutely positioned.
	   An earlier version placed each at top:100% and the buttons landed on top
	   of the menu, because the offset could not know the menu's height. Letting
	   .header-inner wrap and giving each panel a full-width row stacks them in
	   the right order at any menu length. */
	.site-header.nav-open .header-inner {
		flex-wrap: wrap; height: auto; row-gap: 0; padding-bottom: 14px;
	}
	.site-header.nav-open .primary-nav,
	.site-header.nav-open .header-actions { display: flex; flex: 0 0 100%; }

	.site-header.nav-open .primary-nav {
		order: 3; justify-content: flex-start; padding-top: 4px;
	}
	.site-header.nav-open .primary-nav .nav-menu {
		flex-direction: column; align-items: stretch; gap: 0; width: 100%;
	}
	.site-header.nav-open .primary-nav .nav-menu li { width: 100%; }
	.site-header.nav-open .primary-nav .nav-menu a {
		display: block; padding: 14px 0; width: 100%;
		border-bottom: 1px solid var(--line); font-size: 1rem;
	}

	.site-header.nav-open .header-actions { order: 4; gap: 10px; padding-top: 14px; }
	.site-header.nav-open .header-actions > * { flex: 1; justify-content: center; }

	.nav-toggle { padding: 8px; margin-right: -8px; }   /* 40px tap target */
	.nav-toggle span { transition: transform .2s, opacity .2s; }
	.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* --- marquees: reachable by swipe instead of clipped ----------------- */
	.awwd-track { padding-right: 20px; }
	.hero-logos { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* --- tap targets ----------------------------------------------------- */
	.footer-social a { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   Small phones. There was no breakpoint below 768px, so a 360px screen was
   still being served 768px type sizes and 20-24px gutters.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

	.container { padding: 0 16px; }
	section { padding: 40px 0; }

	.hero { padding: 24px 12px 0; }
	.hero-card { padding: 28px 18px; border-radius: 20px; }
	.hero-copy h1 { font-size: 28px; line-height: 34px; }
	.hero-lead { font-size: 15px; line-height: 23px; margin-top: 20px; }
	.hero-cta { margin-top: 28px; gap: 16px; }
	.hero-btn { width: 100%; justify-content: center; }
	.hero-stat-num { font-size: 44px; }

	/* the big display numbers overflow their cards at this width */
	.ahero-years { font-size: 36px; line-height: 40px; }
	.ahero-title { font-size: 26px; line-height: 34px; }
	.ahero-video-title { font-size: 24px; line-height: 32px; }
	.ahero-lead { font-size: 16px; line-height: 24px; }

	.shero { padding: 24px 12px 0; }
	.shero-card { padding: 32px 18px 40px; border-radius: 20px; }
	.shero-card h1 { font-size: 27px; line-height: 34px; }
	.shero-lead { font-size: 15px; line-height: 23px; }
	.sgrid-inner > h2 { font-size: 23px; line-height: 34px; }
	.swhy-head h2 { font-size: 27px; line-height: 34px; }

	.ct-title { font-size: 26px; line-height: 34px; }
	.ct-info-lead h2 { font-size: 23px; line-height: 31px; }

	.pf-hero-card h1 { font-size: 26px; line-height: 34px; }
	.pf-allwork-l, .pf-allwork-r { font-size: 24px; line-height: 32px; }

	.bl-hero-card h1 { font-size: 28px; line-height: 36px; }
	.bl-grid { grid-template-columns: 1fr; }

	.sp-title { font-size: 25px; line-height: 34px; }
	.sp-body { padding-left: 0; padding-right: 0; font-size: 15px; }
	.sp-body h2 { font-size: 22px; line-height: 28px; margin: 32px 0 20px; }
	.sp-body blockquote, .sp-body .sp-callout { padding: 20px 18px; border-radius: 20px; }

	.cta-home .cta-card { padding: 28px 18px; }
	.cta-home .cta-copy h2 { font-size: 28px; line-height: 34px; }
	.cta-home .cta-lead { font-size: 16px; line-height: 24px; }
	.cta-submit { width: 100%; }

	.case-top { padding: 20px; }
	.case-top h3 { font-size: 21px; line-height: 26px; }

	/* Services row: swatch + gaps + plus reserved 254px of a 360px screen, so
	   the service name could not shrink below its longest word and pushed the
	   page 9px wide. min-width:0 lets a flex item shrink past min-content. */
	.svc-list li { gap: 14px; height: auto; padding: 18px 0; }
	.svc-swatch { width: 72px; height: 26px; border-radius: 12px; }
	.svc-name { min-width: 0; font-size: 19px; line-height: 25px; overflow-wrap: anywhere; }
	.svc-plus { width: 24px; height: 24px; }
	.svc-plus svg { width: 18px; height: 18px; }

	/* Portfolio services row: same shape as .svc-list, 150px thumb + 33px
	   indent left nothing for the name. */
	.pf-svc-list li { height: auto; padding: 16px 0; }
	.pf-svc-thumb { flex: 0 0 72px; height: 26px; border-radius: 12px; }
	.pf-svc-name { min-width: 0; padding-left: 14px; font-size: 17px; line-height: 23px; overflow-wrap: anywhere; }
	.pf-svc-plus svg { width: 18px; height: 18px; }

	/* Blog card meta: the date span is white-space:nowrap and sits beside the
	   category, so the pair set a min-content floor wider than the screen and
	   forced the grid track open. Stack them instead. */
	.bl-card-meta { flex-wrap: wrap; gap: 4px 10px; }
	.bl-card-meta span { white-space: normal; }
	.bl-card-meta em { overflow-wrap: anywhere; }

	/* Form fields must be free to shrink; the flex row around the input was
	   holding a min-content width from its icon + padding. */
	.cta-field span { min-width: 0; padding: 0 12px; }
	.cta-field label { font-size: 17px; line-height: 24px; }
}

/* --------------------------------------------------------------------------
   Tablet / small laptop. The desktop layout is authored at 1440 and the first
   breakpoint was 992, so 993-1400px had no rules at all. In practice only the
   header actually broke there: logo + nav + two buttons need ~1021px, so the
   page scrolled 12px sideways on a 1024 screen.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.header-inner { gap: 10px; }
	.nav-menu { gap: 12px; font-size: .85rem; }
	.header-actions { gap: 6px; }
	.header-actions .btn { padding: 10px 12px; font-size: .82rem; }
	.site-logo { font-size: 1rem; }

	/* .pf-case is a hard width:589px, so two columns needed 1178px. The 992
	   rule already fixes this but never ran in the 993-1100 band. */
	.pf-cases-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 20px; }
	.pf-case { width: 100%; max-width: 589px; }
	.pf-case-art { height: auto; aspect-ratio: 589 / 332; }
}

@media (max-width: 480px) {
	/* portfolio hero: button and text link sat on one line */
	.pf-hero-cta { flex-wrap: wrap; gap: 16px; }
	.pf-hero-caselink { white-space: normal; }
}

@media (max-width: 480px) {
	/* long unbroken words in the outsized "all work" display type */
	.pf-allwork-l, .pf-allwork-r { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Visually hidden, still announced.

   Used for labels the visual design does not show but a screen reader needs.
   The theme never defined it, so any markup using the class - including
   WordPress's own pagination - was rendering visibly or relying on a browser
   default.

   clip-path rather than display:none or visibility:hidden, both of which
   remove the element from the accessibility tree entirely, which defeats the
   purpose. Skip links become visible again on focus.
   ========================================================================== */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}
.screen-reader-text:focus {
	position: static;
	width: auto; height: auto;
	margin: 0; padding: 8px 16px;
	clip-path: none;
	background: #fff; color: #051720;
	border-radius: 8px;
	font-size: 1rem; font-weight: 600;
	z-index: 100;
}

/* ==========================================================================
   Carousels.

   Three sets of arrows existed and none of them did anything: the JS targeted
   .testimonial-card and .carousel-arrow, which appear in no template. The
   How We Work track was the real casualty - fixed 340px cards inside an
   overflow:hidden parent, so any card past the third was unreachable by any
   means at all.

   These are native scroll containers rather than a JS slideshow, so swipe,
   trackpad, shift+wheel and keyboard all work without our involvement. The
   arrows call scrollBy() and are hidden by main.js whenever the track already
   fits, since a control that cannot do anything should not be on the page.
   ========================================================================== */
.awwd-track,
.quotes-grid,
.aquotes-grid {
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;              /* the arrows are the affordance */
}
.awwd-track::-webkit-scrollbar,
.quotes-grid::-webkit-scrollbar,
.aquotes-grid::-webkit-scrollbar { display: none; }

.awwd-track > *,
.quotes-grid > *,
.aquotes-grid > * { scroll-snap-align: start; }

/* The track is the scroller; .awwd wraps the heading as well and must not be. */
.awwd-track { overflow-x: auto; padding-bottom: 4px; }

.awwd-arrow[disabled],
.quotes-nav button[disabled] { opacity: .35; cursor: default; }
.awwd-arrow[disabled]:hover,
.quotes-nav button[disabled]:hover { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
	.awwd-track, .quotes-grid, .aquotes-grid { scroll-behavior: auto; }
}

/* Below the 3-up breakpoint the testimonial grids stacked into a long column
   and the arrows had nothing to drive. Swiping a row suits the design better
   and gives those controls a job. */
@media (max-width: 992px) {
	.quotes-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 86%;      /* a fixed track: minmax(0,86%) lets it shrink to fit and never overflows */
		overflow-x: auto;
	}
}
@media (max-width: 768px) {
	.aquotes-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 86%;      /* a fixed track: minmax(0,86%) lets it shrink to fit and never overflows */
		overflow-x: auto;
	}
}

/* ==========================================================================
   Service rows as disclosures.

   Both service lists carried a "+" that did nothing. They now open to the
   description from the Services page — same copy, one source.

   Native <details>/<summary>, matching the Portfolio 2 FAQ already in the
   theme. That gets keyboard operation, correct screen reader semantics and
   in-page find for free, and it still works with JavaScript disabled. A
   scripted accordion would have to reimplement all of that and would get some
   of it wrong.

   The flex row moves from the <li> to the <summary>, because the <li> now
   contains the panel as well and must stack.
   ========================================================================== */
.svc-list li,
.pf-svc-list li { display: block; height: auto; }

.svc-row,
.pf-svc-row {
	display: flex; align-items: center;
	cursor: pointer;
	list-style: none;                       /* kills the default disclosure triangle */
	-webkit-tap-highlight-color: transparent;
}
.svc-row::-webkit-details-marker,
.pf-svc-row::-webkit-details-marker { display: none; }

.svc-row { gap: 32px; height: 104px; }
.pf-svc-row { height: 104px; }

.svc-row:hover .svc-name,
.pf-svc-row:hover .pf-svc-name { opacity: .82; }

/* + rotates into x. One glyph, no second icon to keep in sync. */
.svc-plus svg,
.pf-svc-plus svg { transition: transform .18s ease; }
details[open] > .svc-row .svc-plus svg,
details[open] > .pf-svc-row .pf-svc-plus svg { transform: rotate(45deg); }

.svc-desc,
.pf-svc-desc {
	margin: 0; padding: 0 0 28px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 17px; line-height: 27px;
	color: #9D9FA1; max-width: 760px;
}
.svc-desc { padding-left: 182px; }          /* clears the 150px swatch + 32px gap */
.pf-svc-desc { padding-left: 183px; }       /* 150px thumb + 33px indent */

details[open] > .svc-row .svc-name,
details[open] > .pf-svc-row .pf-svc-name { opacity: 1; }

:where(.svc-row, .pf-svc-row):focus-visible {
	outline: 2px solid currentColor; outline-offset: -4px; border-radius: 6px;
}

@media (max-width: 992px) {
	.svc-row { height: 84px; gap: 20px; }
	.svc-desc { padding-left: 130px; font-size: 16px; line-height: 25px; }
	.pf-svc-desc { padding-left: 130px; }
}

@media (max-width: 480px) {
	/* The swatch shrinks at this width, so the description sits under the whole
	   row rather than indenting past it — there is no room to indent into. */
	.svc-row { gap: 14px; height: auto; padding: 18px 0; }
	.pf-svc-row { height: auto; padding: 16px 0; }
	.svc-desc, .pf-svc-desc {
		padding-left: 0; padding-bottom: 20px;
		font-size: 15px; line-height: 24px;
	}
}

/* --------------------------------------------------------------------------
   The disclosure panel: description plus what's included.

   The indent moves to the panel so the description and the list share one
   alignment. Both lists sit on dark sections, so the bullet is a dot drawn in
   the brand orange rather than a list-style marker, which cannot be coloured
   independently of the text.
   -------------------------------------------------------------------------- */
.svc-panel { padding: 0 0 30px 182px; }
.pf-svc-panel { padding: 0 0 30px 183px; }

.svc-desc,
.pf-svc-desc { padding: 0; margin: 0 0 16px; max-width: 720px; }

.svc-points,
.pf-svc-points {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px 12px;
	max-width: 820px;
}
.svc-points li,
.pf-svc-points li {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 8px 16px 8px 13px;
	border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
	font-family: 'Source Sans 3', 'Inter', sans-serif;
	font-size: 14px; line-height: 20px; color: #D6D8DA;
}
.svc-points li::before,
.pf-svc-points li::before {
	content: ''; flex-shrink: 0;
	width: 7px; height: 7px; border-radius: 50%;
	background: #F76236;
}

@media (max-width: 992px) {
	.svc-panel { padding-left: 130px; }
	.pf-svc-panel { padding-left: 130px; }
}

@media (max-width: 480px) {
	.svc-panel,
	.pf-svc-panel { padding-left: 0; padding-bottom: 22px; }
	.svc-points li,
	.pf-svc-points li { font-size: 13px; padding: 7px 13px 7px 11px; }
}

@media (max-width: 768px) {
	/* 104px is right against a 1200px photograph; on a phone it reads as a gap
	   rather than breathing room. */
	.about-photo { margin-top: 60px; }
}

/* --------------------------------------------------------------------------
   Testimonial cards.

   min-height:499px came from the Figma frame, where all three quotes happened
   to be the same length. With real quotes of different lengths it leaves the
   short ones with a large empty gap above the attribution. Grid rows already
   stretch every card to match the tallest, so the fixed height only ever
   added dead space.
   -------------------------------------------------------------------------- */
.quote { min-height: 0; }

.quote-initials {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: #DDE3EC; color: #51606F;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
	font-size: 15px; font-weight: 700; letter-spacing: .02em;
}