/* Desktop vs Figma fixes: feed template (Figma 3:2 "Blog/Newsletter/Casestudy
   Feed Templates", 1512 wide) for Resources (page 36) and Success Stories
   (page 37). No reference image exists for this frame, so every value below is
   a spec node value (y/x/w/h, font) from build-scripts/figma-data/
   spec_all_frames.json, verified with compare/dk_feed_anchor_check.py at 1512px.
   Everything sits inside min-width:768px so the mobile pass is untouched. */

/* ── Resources (page 36) ──────────────────────────────────────────────── */
@media (min-width: 768px) {
	/* Hero: sand band ends at y=835 (the nav bar is 71px here, so the column
	   below it is 764px, not 765). Intro starts 48px under the h1 (y=491), the
	   stag 25px under the intro. */
	body.page-id-36 .elementor-element-e234cab {
		min-height: 764px !important;
		height: 764px !important;
	}
	body.page-id-36 .elementor-element-e234cab > p {
		margin-top: 48px !important;
	}
	/* Stags: Figma fills the hero stag #462222 and the olive-band stag cream
	   #EAE4D8. custom.css's page-36 brightness() filter turned both near-black. */
	body.page-id-36 .elementor-element-e234cab > img.e-image-base {
		margin-top: 25px !important;
		content: url('../../img/deer-dark.png');
		filter: none !important;
	}
	body.page-id-36 .elementor-element-63949fe > img.e-image-base {
		filter: none !important;
	}

	/* Library: script 85px into the section (y=920), h2 35px under the script
	   (the container also carries a 20px flex gap, hence 15). */
	body.page-id-36 .elementor-element-313c1e9 {
		padding-top: 85px !important;
		padding-bottom: 107px !important;
	}
	body.page-id-36 .elementor-element-3ccf3b6 > h2:nth-child(2) {
		margin-top: 15px !important;
	}

	/* Cards: Figma 436x358 bordered image, 40px/36px title in a 488px box
	   (26px wider than the image each side) holding three lines, READ MORE
	   56px under the title box with a 1px rule 8px below the letters, rows
	   657px apart (card 573 + 84 gap). */
	body.page-id-36 .sh-resource-cards {
		gap: 84px 39px !important;
	}
	body.page-id-36 .sh-resource-cards .sh-resource-card-img {
		border: 1px solid #3B1919;
		box-sizing: border-box;
	}
	/* Figma's title box is 488px, but neighbouring 488px boxes overlap by 13px
	   (column pitch 475). Its placeholder titles never reached the box edge;
	   real titles do, and adjacent lines then touched. 462px (13px in from
	   each side of Figma's box) keeps the design's measure without collisions. */
	body.page-id-36 .sh-resource-card-title {
		width: 462px;
		max-width: none;
		margin: 24px -13px 0;
		font-size: 40px;
		line-height: 36px;
		min-height: 108px;
		letter-spacing: -0.4px;
	}
	body.page-id-36 .sh-resource-card-readmore {
		line-height: 18px;
		padding: 56px 0 8px;
		text-decoration: none;
		border-bottom: 1px solid #3B1919;
	}

	/* Ticker: a 1px rule, 40px text 17px under it, olive 16px below the text
	   (rule at y=2630, text 2648, olive 2700). The luggage tag (274x283 at
	   x=1039) hangs from 23px above the rule down into the olive band. */
	body.page-id-36 .elementor-element-0ecf4f4 {
		position: relative;
		z-index: 3;
		border-top: 1px solid #3B1919;
		padding: 17px 0 16px !important;
	}
	body.page-id-36 .elementor-element-0ecf4f4::after {
		content: "";
		position: absolute;
		top: -24px;
		left: 1039px;
		width: 274px;
		height: 283px;
		background: url('../../../../../uploads/2026/08/tag_transparent.png') center / contain no-repeat;
		pointer-events: none;
	}

	/* Coal band 698px: CTA 238 wide (51px tall site-wide), 161px under it. */
	body.page-id-36 .elementor-element-63949fe {
		padding-bottom: 161px !important;
	}
	body.page-id-36 .elementor-element-63949fe > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
		padding-inline: 20px !important;
		white-space: nowrap !important;
	}

	/* Newsletter band: 263px between 1px rules; heading at x=46; two 339x55
	   fields at x=773 / 1125 (13px apart) 71px down, a 281x51 button 17px under
	   them, left-aligned. */
	body.page-id-36 .elementor-element-2f30bd3 {
		height: 263px !important;
		min-height: 0 !important;
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
		box-sizing: border-box;
	}
	body.page-id-36 .elementor-element-b682f19 {
		padding: 0 48px 0 46px !important;
		align-items: center !important;
	}
	/* Heading pinned at Figma's y (58px into the band) rather than centred: its
	   three 45px lines are taller than the form, so centring pushed it 8px down. */
	body.page-id-36 .elementor-element-b682f19 > h2 {
		align-self: flex-start !important;
		margin-top: 57px !important;
	}
	body.page-id-36 .elementor-element-b682f19 > .sh-newsletter-form {
		flex: 0 0 691px !important;
		width: 691px !important;
	}
	body.page-id-36 .elementor-element-b682f19 .elementor-form-fields-wrapper {
		margin: 0 !important;
		column-gap: 13px !important;
		row-gap: 17px !important;
	}
	body.page-id-36 .elementor-element-b682f19 .elementor-field-group {
		padding: 0 !important;
		margin: 0 !important;
	}
	body.page-id-36 .elementor-element-b682f19 .elementor-field-type-text,
	body.page-id-36 .elementor-element-b682f19 .elementor-field-type-email {
		flex: 0 0 339px !important;
		width: 339px !important;
		max-width: 339px !important;
	}
	body.page-id-36 .elementor-element-b682f19 .e-form__buttons {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		justify-content: flex-start !important;
	}
	body.page-id-36 .elementor-element-b682f19 input.elementor-field-textual {
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	body.page-id-36 .elementor-element-b682f19 input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	body.page-id-36 .elementor-element-b682f19 .elementor-button {
		flex: 0 0 auto !important;
		width: 281px !important;
		min-width: 281px !important;
		padding-inline: 20px !important;
		white-space: nowrap !important;
	}

	/* Footer: link columns at x=1200 / 1357; wordmark 1414x186 at x=50 with
	   the legal bar 25px under it; legal links at x=46 / 176 / 1373. */
	body.page-id-36 .elementor-element-e0ec507 {
		padding-right: 65px !important;
		padding-left: 46px !important;
	}
	body.page-id-36 .elementor-element-aa5e038 {
		gap: 67px !important;
	}
	/* Figma's footer rectangle starts 7px under the pink band's top rule
	   (y=3654 vs the band's 3661 end), so the wordmark sits 490px below the
	   band, not 497. */
	body.page-id-36 .elementor-element-43b7a77 {
		padding: 256px 48px 25px 50px !important;
	}
	body.page-id-36 .elementor-element-43b7a77 > img {
		width: 1414px !important;
		max-width: 100% !important;
		height: 186px !important;
		margin: 0 !important;
		object-fit: fill !important;
	}
	body.page-id-36 .elementor-element-3e93d2b {
		padding: 18px 51px 22px 46px !important;
	}
	body.page-id-36 .elementor-element-13c0217 {
		gap: 12px !important;
	}
}

/* ── Success Stories (page 37) ────────────────────────────────────────────
   Same frame. The page keeps its maroon hero and small uppercase labels
   ("success stories", "case studies") where Figma draws a sand hero with
   70px script headings - a content/brand choice already kept on mobile - so
   each label is placed in the vertical centre of Figma's 50px script slot and
   everything else sits on Figma's own y values. */
@media (min-width: 768px) {
	/* Hero ends at y=835 like the template (was 607). Order as in Figma:
	   label/script slot (243-293), h1 323, intro 491, stag 25px under it. */
	body.page-id-37 .elementor-element-945c405 {
		height: 764px !important;
		min-height: 764px !important;
		padding: 188px 49px 0 !important;
		box-sizing: border-box;
	}
	body.page-id-37 .elementor-element-374afae > p:first-of-type {
		order: 1;
		margin-top: 0 !important;
	}
	body.page-id-37 .elementor-element-374afae > h1 {
		order: 2;
		margin-top: 46px !important;
	}
	body.page-id-37 .elementor-element-374afae > p:last-of-type {
		order: 3;
		margin-top: 50px !important;
	}
	body.page-id-37 .elementor-element-374afae > img {
		order: 4;
		margin-top: 25px !important;
	}

	/* Library: label centred in the script slot (920-970), h2 at 1005. */
	body.page-id-37 .elementor-element-fe6ddff {
		padding-top: 101px !important;
		padding-bottom: 107px !important;
	}
	body.page-id-37 .elementor-element-fe6ddff > h2 {
		margin-top: 51px !important;
	}

	/* Cards: same geometry as Resources. The covers are 16:9 text posters, so
	   they are letterboxed inside Figma's 436x358 box on their own #F6F1F0
	   ground rather than cropped through the copy. */
	body.page-id-37 .sh-resource-cards {
		gap: 84px 39px !important;
	}
	/* Client QA #37 ("update the images to fit better"): the case-study
	   covers are 16:9 posters, so a 436x358 box left a cream band above and
	   below each one. The box now matches the artwork - the poster fills it
	   edge to edge, and `contain` stays as a guard for any future cover that
	   is not 16:9. */
	body.page-id-37 .sh-resource-cards .sh-resource-card-img {
		aspect-ratio: 9 / 8; /* 2026-10-11: new 1800x1600 covers (was 16:9) */
		object-fit: contain;
		background: #F6F1F0;
		border: 1px solid #3B1919;
		box-sizing: border-box;
	}
	body.page-id-37 .sh-resource-card-title {
		width: 462px;
		max-width: none;
		margin: 24px -13px 0;
		font-size: 40px;
		line-height: 36px;
		min-height: 108px;
		letter-spacing: -0.4px;
	}
	body.page-id-37 .sh-resource-card-readmore {
		line-height: 18px;
		padding: 56px 0 8px;
		text-decoration: none;
		border-bottom: 1px solid #3B1919;
	}

	/* Ticker, tag, coal band, newsletter, footer: same values as Resources. */
	body.page-id-37 .elementor-element-6e6cfd8 {
		position: relative;
		z-index: 3;
		border-top: 1px solid #3B1919;
		padding: 17px 0 16px !important;
	}
	body.page-id-37 .elementor-element-6e6cfd8::after {
		content: "";
		position: absolute;
		top: -24px;
		left: 1039px;
		width: 274px;
		height: 283px;
		background: url('../../../../../uploads/2026/08/tag_transparent.png') center / contain no-repeat;
		pointer-events: none;
	}
	body.page-id-37 .elementor-element-f81aa54 {
		padding-bottom: 161px !important;
	}
	body.page-id-37 .elementor-element-f81aa54 > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
		padding-inline: 20px !important;
		white-space: nowrap !important;
	}
	body.page-id-37 .elementor-element-ad0487c {
		height: 263px !important;
		min-height: 0 !important;
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
		box-sizing: border-box;
	}
	body.page-id-37 .elementor-element-64e7019 {
		padding: 0 48px 0 46px !important;
		align-items: center !important;
	}
	body.page-id-37 .elementor-element-64e7019 > h2 {
		align-self: flex-start !important;
		margin-top: 57px !important;
	}
	body.page-id-37 .elementor-element-64e7019 > .sh-newsletter-form {
		flex: 0 0 691px !important;
		width: 691px !important;
	}
	body.page-id-37 .elementor-element-64e7019 .elementor-form-fields-wrapper {
		margin: 0 !important;
		column-gap: 13px !important;
		row-gap: 17px !important;
	}
	body.page-id-37 .elementor-element-64e7019 .elementor-field-group {
		padding: 0 !important;
		margin: 0 !important;
	}
	body.page-id-37 .elementor-element-64e7019 .elementor-field-type-text,
	body.page-id-37 .elementor-element-64e7019 .elementor-field-type-email {
		flex: 0 0 339px !important;
		width: 339px !important;
		max-width: 339px !important;
	}
	body.page-id-37 .elementor-element-64e7019 .e-form__buttons {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		justify-content: flex-start !important;
	}
	body.page-id-37 .elementor-element-64e7019 input.elementor-field-textual {
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	body.page-id-37 .elementor-element-64e7019 input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	body.page-id-37 .elementor-element-64e7019 .elementor-button {
		flex: 0 0 auto !important;
		width: 281px !important;
		min-width: 281px !important;
		padding-inline: 20px !important;
		white-space: nowrap !important;
	}
	body.page-id-37 .elementor-element-a649978 {
		padding-right: 65px !important;
		padding-left: 46px !important;
	}
	body.page-id-37 .elementor-element-e5aea3d {
		gap: 67px !important;
	}
	body.page-id-37 .elementor-element-3f7be58 {
		padding: 256px 48px 25px 50px !important;
	}
	body.page-id-37 .elementor-element-3f7be58 > img {
		width: 1414px !important;
		max-width: 100% !important;
		height: 186px !important;
		margin: 0 !important;
		object-fit: fill !important;
	}
	body.page-id-37 .elementor-element-758ad30 {
		padding: 18px 51px 22px 46px !important;
	}
	body.page-id-37 .elementor-element-709cf44 {
		gap: 12px !important;
	}
}

/* Resources hero argyle (desktop). Rendering the LIVE Figma frame 3:2 at 100%
   (2026-09-17) shows a clear sand argyle behind the hero (pixel std ~12 incl.
   grain); the build was flat sand (std ~2). The tile is the frame's own
   pattern: a 147x198 repeat (best held-out fit on the grain-blurred frame, the same grid as the homepage founder band), per-pixel median over the
   pattern-only margins so Figma's grain is removed - the section's existing
   grain overlay image still sits on top. The section starts at the frame
   origin, so the tile is phased at 0 0. */
@media (min-width: 768px) {
	body.page-id-36 .elementor-element-4431138 {
		background-image: url('../../img/resources-argyle-tile.png') !important;
		background-repeat: repeat !important;
		background-position: 0 0 !important;
	}
	/* The tile already carries the frame's colour; the 40% overlay-blend grain
	   on top lightened it (mean rgb 226/207/165 vs Figma 221/198/148). Without
	   it the hero is within 1.3 levels of the live frame. */
	body.page-id-36 .elementor-element-4431138 > img.sh-blend-overlay {
		display: none !important;
	}
}

/* Tablet (laid out at 1024): the Resources grid is 898px wide and two 436px
   cards plus the 39px gap need 911px, so the 18 cards fell into a single
   narrow column down the middle of the page (a 15,000px-long page). A 24px
   column gap lets two sit side by side, as Success Stories already does. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-36 .sh-resource-cards {
		gap: 84px 24px !important;
	}
}