/*
 * Hotel Indigo — block interop layer.
 * Neutralizes markup deltas between the React prerender and the block
 * editor's output (figure wrappers, li→group rows, query-loop chrome) so the
 * ported design CSS applies unchanged. No design rules live here.
 */

/* ---- keyboard focus visibility (a11y): the design system styles
   :focus-visible only on hg-btn/hg-text-link; give every interactive
   element a consistent, surface-adaptive indicator ---- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
input:focus-visible {
	outline: 2px solid var(--hg-brass, #c7a258);
	outline-offset: 3px;
}

/* ---- core image block wraps <img> in figure.wp-block-image ---- */
figure.wp-block-image,
figure.wp-block-image.alignwide,
figure.wp-block-image.alignfull {
	margin: 0;
}
/* the design system positions/sizes the img itself against its frame; the
   inserted figure must not create a layout box in between */
.wp-block-image {
	display: contents;
}

/* ---- lookbook cards: every photo must share the card's ratio box ---- */
/* Block-converted cards carry .rooms-lookbook-figure on the core/image
   figure itself, which the display:contents rule above would erase — and
   renderer-built cards put no class on the img. Left alone, each photo
   floats at its natural ratio inside the card (uneven heights, background
   showing under short ones). Restore the figure box and pin the img to
   fill it, matching the app's figure > img.rooms-lookbook-img markup. */
.rooms-lookbook-card-wrap .wp-block-image.rooms-lookbook-figure {
	display: block;
}
.rooms-lookbook-card-wrap .rooms-lookbook-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* the editor's is-layout-flow class on container wrappers out-specifies the
   design's flex indicator rows and re-flows the dots — re-assert front-end */
.wp-block-post-content .home-stay-indicators,
.wp-block-post-content .rooms-type-indicators,
body .home-stay-indicators,
body .rooms-type-indicators {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.wp-block-post-content .home-stay-indicators .home-stay-dot,
.wp-block-post-content .rooms-type-indicators .home-stay-dot,
body .home-stay-indicators .home-stay-dot,
body .rooms-type-indicators .home-stay-dot {
  width: 0.5rem;
  height: 0.375rem;
  padding: 0;
  background: #002e5233;
  border: none;
  border-radius: 62.4375rem;
}
.wp-block-post-content .home-stay-indicators .home-stay-dot.is-active,
.wp-block-post-content .rooms-type-indicators .home-stay-dot.is-active,
body .home-stay-indicators .home-stay-dot.is-active,
body .rooms-type-indicators .home-stay-dot.is-active {
  width: 1.5rem;
  background: #002e52;
}

/* ---- perks sections: inner content keeps the container measure, centered
   in the full-bleed section (rooms-perks-inner width:100% would otherwise
   override .container by load order); perk items stack number above name,
   left-aligned ---- */
.rooms-perks .rooms-perks-inner,
.home-perks-section .home-perks-container {
	width: min(1280px, calc(100% - 2 * var(--gutter, 3rem)));
	margin-inline: auto;
}
.rooms-perks .rooms-perks-inner .container {
	width: 100%;
	margin-inline: 0;
}
.rooms-perks-list > .rooms-perk,
.rooms-perks-list > li,
.rooms-perks .rooms-perk {
	border-top: 1px solid #ffffff47;
	padding-top: 1.3rem;
	text-align: left;
}
.rooms-perks .rooms-perk-num,
.rooms-perks-list .rooms-perk-num {
	display: block;
	margin-bottom: 0.7rem;
}
.home-perks-strip .home-perk-strip-item,
.home-perks-section .home-perk-strip-item,
.home-perks-strip > li {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.35rem;
	align-items: flex-start;
	text-align: left;
}

/* ---- perks background images always fill the full section — editor
   replacements keep natural aspect ratio which leaves the bottom half bare
   on mobile ---- */
.home-perks-bg-wrap img,
.rooms-perks-bg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	aspect-ratio: auto !important;
}

/* ---- reCAPTCHA mount inside the server-submitted forms (hg-form is a
   grid with its own gap; rfp-form stacks, so give the mount its rhythm) ---- */
.indigo-form-captcha {
	margin: 0.4rem 0 1.6rem;
}

/* ---- server-submitted forms: status note states + honeypot (kept
   offscreen; bots that fill it are discarded server-side) ---- */
.indigo-form-note {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0.9rem 0 0;
	max-width: 52ch;
}
.indigo-form-note.is-error,
.hg-form-sent.is-error {
	color: #9c2b1f;
}
.indigo-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- footer small text: WCAG AA contrast. #8c7242 measured 4.11:1 and
   #717885 measured 4.0:1 on #f4f3ee (4.5 required at these sizes). Set
   here (always loaded) so the footer passes on every page, not just the
   ones loading the home chunk ---- */
.home-footer-sub-detail {
	color: #81693d;
}
.home-footer-copy,
.home-footer-legal-nav a,
.home-footer-sage-link {
	color: #666c78;
}

/* ---- editable header: the logo is a core/image block (figure wrapper) and
   the primary nav is core/navigation. Map the navigation DOM onto the
   home-header design 1:1 (links, gold hover underline, chevron, dropdown,
   sunk state). Scoped under .home-header so nothing else is touched ---- */
.home-header .home-header-left img {
	object-fit: contain;
	transform-origin: 0;
	width: auto;
	height: clamp(4.25rem, 6.5vw, 5.25rem);
	transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s;
	display: block;
}
.home-header.sunk .home-header-left img {
	height: 2.375rem;
}
@media (max-width: 60em) {
	.home-header .home-header-left img {
		height: clamp(3rem, 6.5vw, 3.5rem);
	}
	.home-header.sunk .home-header-left img {
		height: 2.125rem;
	}
}

.home-header-nav-middle .wp-block-navigation__container {
	gap: clamp(1.1rem, 1.8vw, 2.1rem);
	margin: 0;
	padding: 0;
}
.home-header-nav-middle li.wp-block-navigation-item {
	display: flex;
	align-items: center;
}
.home-header-nav-middle .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.3125rem;
	padding: 0.375rem 0;
	font-family: "Beausite Fit", Avenir Next, Futura, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.71875rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 4px #0006;
	white-space: nowrap;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.25s;
	position: relative;
}
/* gold grow-underline on hover (mirrors .home-nav-link:after) */
.home-header-nav-middle .wp-block-navigation-item__content::after {
	content: "";
	background: #dfbe58;
	width: 0;
	height: 0.09375rem;
	transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
	position: absolute;
	bottom: 0;
	left: 0;
}
.home-header-nav-middle .wp-block-navigation-item__content:hover,
.home-header-nav-middle li.has-child:hover > .wp-block-navigation-item__content {
	color: #dfbe58;
}
.home-header-nav-middle .wp-block-navigation-item__content:hover::after,
.home-header-nav-middle li.has-child:hover > .wp-block-navigation-item__content::after {
	width: 100%;
}
.home-header-nav-middle .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
/* sunk variants */
.home-header.sunk .home-header-nav-middle .wp-block-navigation-item__content {
	color: #002e52;
	text-shadow: none;
}
.home-header.sunk .home-header-nav-middle .wp-block-navigation-item__content::after {
	background: #002e52;
}
.home-header.sunk .home-header-nav-middle .wp-block-navigation-item__content:hover,
.home-header.sunk .home-header-nav-middle li.has-child:hover > .wp-block-navigation-item__content {
	color: #c59b27;
}
/* submenu chevron (core ships its own svg inside the toggle) */
.home-header-nav-middle .wp-block-navigation-submenu__toggle,
.home-header-nav-middle .wp-block-navigation__submenu-icon {
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.home-header-nav-middle .wp-block-navigation__submenu-icon,
.home-header-nav-middle .wp-block-navigation-submenu__toggle svg {
	width: 9px;
	height: 9px;
	transition: transform 0.25s, color 0.25s;
}
li.has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
li.has-child:hover > .wp-block-navigation-submenu__toggle svg,
li.has-child:hover > .wp-block-navigation-item__content ~ .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}
/* dropdown panel (mirrors .home-subnav-dropdown + .home-subnav-link).
   !important: core's global-styles inline navigation rules reference
   spacing presets this theme doesn't define — the invalid var() computes
   to 0 and out-prioritizes plain declarations */
.home-header-nav-middle .wp-block-navigation__submenu-container {
	min-width: 13.75rem;
	margin: 0;
	padding: 0.375rem 0 !important;
	list-style: none;
	background: #fff;
	border: 1px solid #002e521f;
	border-radius: 0;
	box-shadow: 0 16px 40px #002e5224;
}
.home-header-nav-middle .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block;
	width: 100%;
}
.home-header-nav-middle .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block !important;
	width: 100%;
	padding: 0.625rem 1.125rem !important;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: #002e52 !important;
	text-shadow: none;
	white-space: normal;
	border-radius: 0;
}
.home-header-nav-middle .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}
.home-header-nav-middle .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #c59b27 !important;
	background: #002e520f;
}
.home-header.sunk .home-header-nav-middle .wp-block-navigation__submenu-container {
	background: #fff;
	border-color: #002e521f;
	box-shadow: 0 16px 40px #002e5224;
}
/* desktop nav hides below 1080px (hamburger + overlay take over). The
   layout-flex display from core out-specifies the original hide rule */
@media (max-width: 67.5em) {
	.home-header-nav-middle.wp-block-navigation {
		display: none;
	}
}

/* ---- editable footer: logo is a core/image block (its figure wrapper is
   display:contents via the interop rule) — retarget the img sizing that
   .home-footer-logo used to carry ---- */
.home-footer-brand-col img {
	display: block;
	width: clamp(11.25rem, 16vw, 13.125rem);
	height: auto;
	margin: 0 auto;
}

/* ---- offers cards: kicker, title, perk, description and CTA row stay
   LEFT-aligned regardless of layout settings (constrained "Inner blocks use
   content width" would otherwise center the boxes) ---- */
.offers-card,
.offers-card .rooms-type-kicker,
.offers-card .offers-card-title,
.offers-card .offers-perk,
.offers-card .offers-card-desc {
	text-align: left !important;
}
.offers-card .rooms-type-actions {
	justify-content: flex-start !important;
}
.offers-card.is-layout-constrained > *,
.offers-card .is-layout-constrained > *,
.offers-card.is-layout-constrained .wp-block-post-featured-image,
.offers-card .is-layout-constrained .wp-block-post-featured-image {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* ---- stage facts (between descriptions and CTAs on stage bands): the
   box stays centered in its column — the ul margin reset above was killing
   the design's margin:0 auto ---- */
.wp-block-post-content ul.stage-facts,
body ul.stage-facts,
ul.stage-facts {
	width: min(100%, 21.25rem);
	margin: 0 auto 1.7rem;
}

/* ---- subtle text entrance animation (class applied via indigo.js —
   without JS the text never hides) ---- */
.indigo-text-anim {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: opacity, transform;
}
.indigo-text-anim.indigo-text-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.indigo-text-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---- rooms index stage sliders: indicator spacing on desktop (a global
   margin-block rule kills the design margin-top); on mobile the nav pill
   centers under the image and the dots sit below it ---- */
.rooms-type-indicators {
	margin-top: 2rem !important;
	justify-content: center !important;
}
@media (max-width: 60em) {
	/* anchor the pill to the image frames: hanging it off the slider bottom
	   would slide down with the dots and cover them */
	.rooms-type-frames {
		position: relative;
	}
	.rooms-type-nav {
		inset: auto auto -2.0625rem 50% !important;
		right: auto !important;
		transform: translate(-50%, -74%) !important;
	}
	.rooms-type-indicators {
		margin-top: 3.6rem !important;
	}
}

/* ---- perks list on small phones: keep 2 items per row (the design
   collapses to 1 column at ≤45em) ---- */
@media (max-width: 45em) {
	.rooms-perks .rooms-perks-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ---- flow layout must not inject gaps into the editorial stacks ---- */
.wp-block-post-content.is-layout-flow > * + *,
.wp-block-group.is-layout-flow > * + *,
.wp-block-query .wp-block-post-template.is-layout-flow > li + li {
	margin-block-start: 0;
}

/* ---- lists: app reset (no bullets, no indent) ---- */
.wp-block-post-content ul,
.wp-block-post-content ol {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
}
.wp-block-post-content ul li,
.wp-block-post-content ol li {
	margin: 0;
}

/* ---- complex list rows converted li → group (steps / hairline) ---- */
/* steps bands (RFP "After You Send It", groups "The Group Perks"): desktop
   renders the horizontal grid — items as columns, number stacked above the
   content, hairline top, left-aligned; ≤60em falls back to full-width rows
   with the number in a left column (design media rules, mapped to groups) */
.steps-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(13.125rem, 1fr)) !important;
	column-gap: clamp(1.6rem, 3vw, 2.8rem) !important;
}
.steps-list > .wp-block-group {
	display: block !important;
	border-top: 1px solid var(--border);
	padding: clamp(1.4rem, 2.4vw, 2rem) 0.2rem !important;
	text-align: left !important;
}
.steps-list .steps-num {
	display: block !important;
	margin-bottom: 0.9rem !important;
}
@media (min-width: 68.8125em) {
	#perks.steps-band .steps-list {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 60em) {
	.steps-list {
		display: block !important;
		grid-template-columns: none !important;
	}
	.steps-list > .wp-block-group {
		display: grid !important;
		grid-template-columns: clamp(3.4rem, 6vw, 5.4rem) minmax(0, 1fr) !important;
		align-items: start;
		gap: clamp(1rem, 2.5vw, 2.4rem);
	}
	.steps-list > .wp-block-group:last-child {
		border-bottom: 1px solid var(--border);
	}
	.steps-list .steps-num {
		margin-bottom: 0 !important;
	}
}
.hairline-rows > .wp-block-group {
	border-top: 1px solid var(--border);
	padding: 1.35rem 0.2rem;
}
.hairline-rows > .wp-block-group:last-child {
	border-bottom: 1px solid var(--border);
}
.hairline-rows > .wp-block-group:hover .hairline-row-title {
	color: var(--rust);
}

/* ---- query loops (offers grid, blog cards) ---- */
.offers-grid > li,
.offers-grid > .wp-block-post {
	display: flex;
}
.link-cards > li,
.link-cards > .wp-block-post,
.link-cards > .wp-block-group {
	margin: 0;
}
/* custom (non-query) itinerary cards: the card wrapper is a group whose
   child article must fill the grid cell exactly like the loop's li did */
.link-cards > .wp-block-group {
	display: flex;
}
/* custom cards swap core/post-featured-image for core/image, whose figure
   carries wp-block-image — the display:contents rule above would erase the
   .cards-portrait ratio box. Restore it for these figures only. */
.link-card .wp-block-image.cards-portrait {
	display: block;
}
/* core's `.wp-block-image img { height: auto }` out-runs the design's
   `.cards-portrait img { height: 100% }` in the canvas (stylesheet order)
   — pin the fill like the lookbook fix above */
.link-card .wp-block-image.cards-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wp-block-post-template.offers-grid,
.wp-block-post-template.link-cards {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-post-template .wp-block-post {
	margin: 0;
}
/* empty bound paragraphs (kicker without meta) shouldn't take space */
.offers-grid .rooms-type-kicker:empty,
.link-cards .rooms-type-kicker:empty,
.wp-block-post .offers-perk:empty {
	display: none;
}

/* ---- mobile menu: keep the menu column inside the page gutters ---- */
/* .home-menu-body sets width:100% which beats .container's gutter math on
   narrow screens (desktop was saved by its own max-width) — the menu items
   rendered flush against the viewport edge. Re-assert the container math,
   capped at the design's 42.5rem column. */
.home-menu-body.container {
	width: min(42.5rem, calc(100% - 2 * var(--gutter)));
}

/* ---- editor canvas niceties (not loaded on the front end) ---- */
.editor-styles-wrapper .indigo-block-preview {
	outline: 1px dashed rgba(0, 46, 82, 0.25);
	outline-offset: 6px;
}
.editor-styles-wrapper .indigo-faq-editor {
	border-left: 3px solid var(--gold, #c59b27);
	padding-left: 1rem;
}


/* ---- glance straddle rules: also apply on room singles (their route
   chunk is rooms css, which predates the straddle styles) ---- */
.rooms-glance-anchor.is-straddle,.rooms-glance-anchor.overlap-both { height:0;margin-top:0 }
.rooms-glance-anchor.is-straddle .rooms-glance,.rooms-glance-anchor.overlap-both .rooms-glance { transform:translateY(-50%) }
.rooms-glance-anchor.is-straddle+.rooms-intro,.rooms-glance-anchor.overlap-both+.rooms-intro { padding-top:clamp(7rem,11vw,10rem) }
:is(.rooms-hero:has(+.rooms-glance-anchor.is-straddle) .rooms-hero-inner,.rooms-hero:has(+.rooms-glance-anchor.overlap-both) .rooms-hero-inner) { padding-bottom:clamp(6.5rem,13vh,9rem) }
@media (width<=35em) {
.rooms-glance-anchor.is-straddle .rooms-glance,.rooms-glance-anchor.overlap-both .rooms-glance { grid-template-columns:repeat(2,minmax(0,1fr));transform:translateY(-58%) }
.rooms-glance-anchor.is-straddle .rooms-glance-cell,.rooms-glance-anchor.overlap-both .rooms-glance-cell { border-left:none;padding:.95rem 1rem }
.rooms-glance-anchor.is-straddle .rooms-glance-cell+.rooms-glance-cell,.rooms-glance-anchor.overlap-both .rooms-glance-cell+.rooms-glance-cell { border-left:1px solid var(--border) }
.rooms-glance-anchor.is-straddle .rooms-glance-cell:nth-child(n+3),.rooms-glance-anchor.overlap-both .rooms-glance-cell:nth-child(n+3) { border-top:1px solid var(--border) }
.rooms-glance-anchor.is-straddle+.rooms-intro,.rooms-glance-anchor.overlap-both+.rooms-intro { padding-top:11.5rem }
}

/* ---- Direct Booking Privileges pattern (patterns/direct-booking-privileges.php):
   moved here from the home chunk so the section renders identically on
   every page, not just the front page ---- */

	.home-perks-section {
		color: #fff;
		background: #000;
		flex-direction: column;
		justify-content: flex-end;
		width: 100%;
		min-height: clamp(35rem,62vw,52.5rem);
		padding-top: 8.75rem;
		padding-bottom: clamp(3rem,5.5vw,4.5rem);
		display: flex;
		position: relative;
		overflow: hidden;
	}
	.home-perks-bg-wrap {
		z-index: 1;
		position: absolute;
		inset: 0;
		overflow: hidden;
	}
	.home-perks-bg-img {
		object-fit: cover;
		object-position: center;
		image-rendering: auto;
		backface-visibility: hidden;
		width: 100%;
		height: 100%;
		display: block;
		transform: translateZ(0);
	}
	.home-perks-scrim {
		background: linear-gradient(#0000 0% 45%,#00000073 70%,#000c 100%);
		position: absolute;
		inset: 0;
	}
	.home-perks-container {
		z-index: 3;
		width: 100%;
		position: relative;
	}
	.home-perks-bottom-lockup {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(1.8rem,3.2vw,2.8rem);
		display: flex;
	}
	.home-perks-head {
		text-align: left;
		margin: 0;
	}
	.home-perks-eyebrow {
		letter-spacing: .28em;
		text-transform: uppercase;
		color: #fff;
		text-shadow: 0 2px 8px #00000080;
		margin: 0 0 .85rem;
		font-family: Beausite Fit,Avenir Next,Futura,ui-sans-serif,system-ui,sans-serif;
		font-size: 0.71875rem;
		font-weight: 400;
		display: block;
	}
	.home-perks-title {
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #fff;
		text-shadow: 0 3px 14px #0009;
		margin: 0;
		font-family: Beausite Grand,Avenir Next,Futura,sans-serif;
		font-size: clamp(1.85rem,2.8vw,2.5rem);
		font-weight: 400;
		line-height: 1.15;
	}
	.home-perks-title .home-title-primary {
		color: #fff;
	}
	.home-perks-title .home-title-accent {
		color: #dfbe58;
	}
	.home-perks-strip {
		border-top: 1px solid #ffffff38;
		grid-template-columns: repeat(4,1fr);
		gap: clamp(1.2rem,2.5vw,2.5rem);
		width: 100%;
		padding-top: clamp(1.4rem,2.2vw,2rem);
		display: grid;
	}
	.home-perk-strip-item {
		flex-direction: column;
		gap: .35rem;
		display: flex;
	}
	.home-perk-strip-num {
		letter-spacing: .22em;
		text-transform: uppercase;
		color: #dfbe58;
		text-shadow: 0 1px 4px #00000080;
		font-family: Beausite Fit,Avenir Next,Futura,ui-sans-serif,system-ui,sans-serif;
		font-size: 0.6875rem;
		font-weight: 400;
	}
	.home-perk-strip-title {
		letter-spacing: .02em;
		color: #fff;
		text-shadow: 0 2px 8px #0000008c;
		font-family: Beausite Classic,Avenir Next,Futura,sans-serif;
		font-size: clamp(0.9375rem,1.35vw,1.1875rem);
		font-weight: 400;
		line-height: 1.3;
	}

@media (width<=56.25em) {
	.home-perks-section {
		justify-content: flex-end;
		min-height: 40rem;
		padding-top: 5rem;
		padding-bottom: clamp(2.4rem,5vw,3.4rem);
	}
	.home-perks-scrim {
		background: linear-gradient(#0000 0%,#00000014 25%,#00000085 55%,#000000e0 100%);
	}
	.home-perks-bottom-lockup {
		gap: 1.25rem;
	}
	.home-perks-strip {
		border-top: 1px solid #ffffff40;
		gap: 1.1rem 1.4rem;
		padding-top: 1.1rem;
		grid-template-columns: repeat(2,1fr)!important;
	}
	.home-perk-strip-title {
		font-size: 0.90625rem;
		line-height: 1.25;
	}
	.home-perk-strip-num {
		font-size: 0.625rem;
	}
}