/* =========================================================================
   Showroom page (page-showroom.php) — Farringdon.
   Scoped to .sr — mobile-first, min-width media queries only.
   2px buttons, 4px cards (sharper-corner direction, Aug 2026).
   ========================================================================= */

.sr {
	--sr-navy: #181d46;
	--sr-lightblue: #90cdeb;
	--sr-band-grey: #f5f5f5;
	--sr-band-blue: #f1f5f5;
	--sr-text: #000;
	--sr-muted: #59607a;
	--sr-line: #e2e6ee;
	--sr-gutter: 20px;

	font-family: 'FFDINStd', Arial, sans-serif;
	color: var(--sr-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.sr { --sr-gutter: 40px; }
}

.sr *,
.sr *::before,
.sr *::after { box-sizing: border-box; }

.sr-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--sr-gutter);
}

.sr-icon { width: 24px; height: 24px; }

/* The theme sets a global `a { font-weight: 600 }` and fades every link to
   0.7 on hover (desktop.css). Neither is wanted on card-sized links here. */
.sr a { font-weight: inherit; }
.sr a:hover { opacity: 1; }

/* ---- Shared ------------------------------------------------------------- */

.sr-section-heading {
	color: var(--sr-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 16px;
}

.sr-section-intro {
	margin: 0 0 32px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--sr-muted);
	max-width: 62ch;
}

@media (min-width: 900px) {
	.sr-section-heading { font-size: 32px; }
}

/* ---- Buttons ------------------------------------------------------------ */

.sr .sr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sr .sr-btn:hover { opacity: 1; }

/* framework.css removes the focus outline from every link and control, so
   keyboard users get no affordance at all. Put one back for this page. */
.sr a:focus-visible,
.sr .sr-btn:focus-visible {
	outline: 3px solid var(--sr-lightblue);
	outline-offset: 3px;
}

.sr-hero .sr-btn:focus-visible { outline-color: #fff; }

/* On the navy hero: Light Blue primary, white-outline ghost. Light-on-dark is
   the high-contrast direction here, as in the header bar. */
.sr .sr-btn--light { background: var(--sr-lightblue); color: var(--sr-navy); }
.sr .sr-btn--light:hover { background: #fff; color: var(--sr-navy); }

.sr .sr-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.sr .sr-btn--ghost:hover {
	background: #fff;
	color: var(--sr-navy);
	box-shadow: inset 0 0 0 1px #fff;
}

.sr .sr-btn .sr-icon { width: 20px; height: 20px; }

/* ---- Hero --------------------------------------------------------------- */

.sr-hero {
	position: relative;
	background: var(--sr-navy);
	color: #fff;
	overflow: hidden;
}

.sr-hero__media { position: absolute; inset: 0; }

.sr-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Only drawn when there is a photograph behind it: on the plain navy band the
   scrim would darken a colour that is already dark enough. */
.sr-hero--image .sr-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(24, 29, 70, 0.94) 0%, rgba(24, 29, 70, 0.75) 45%, rgba(24, 29, 70, 0.45) 100%);
}

.sr-hero__inner {
	position: relative;
	z-index: 1;
	padding-top: 56px;
	padding-bottom: 56px;
}

.sr-hero__content { max-width: 640px; }

.sr-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sr-lightblue);
}

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 600 this rule
   carried from the DIN era made browsers synthesise one. */
.sr-hero__heading {
	margin: 0;
	font-size: 34px;
	line-height: 1.1;
	color: #fff;
}

.sr-hero__intro {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.sr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

@media (min-width: 900px) {
	.sr-hero__inner { padding-top: 88px; padding-bottom: 88px; }
	.sr-hero { min-height: 440px; display: flex; align-items: center; }
	.sr-hero__heading { font-size: 46px; }
}

/* ---- What to expect ----------------------------------------------------- */

.sr-expect { padding: 56px 0; }

.sr-expect__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.sr-expect__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--sr-band-blue);
	color: var(--sr-navy);
}

.sr-expect__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sr-navy);
}

.sr-expect__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sr-muted);
}

@media (min-width: 640px) {
	.sr-expect__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.sr-expect { padding: 88px 0; }
	.sr-expect__grid { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
}

/* ---- Gallery ------------------------------------------------------------ */

.sr-gallery {
	padding: 56px 0;
	background: var(--sr-band-grey);
}

.sr-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-gallery__item figure { margin: 0; }

.sr-gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

.sr-gallery__item figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--sr-muted);
}

@media (min-width: 640px) {
	.sr-gallery__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.sr-gallery { padding: 88px 0; }
	.sr-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }

	/* The first image runs wide: a showroom is a space, and one establishing
	   shot reads better than three equal thumbnails. */
	.sr-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
	.sr-gallery__item:first-child img { aspect-ratio: 3 / 2; height: 100%; }
}

/* ---- Virtual tour ------------------------------------------------------- */

.sr-virtual { padding: 56px 0; }

.sr-virtual__embed {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background: var(--sr-navy);
	aspect-ratio: 16 / 9;
}

.sr-virtual__embed :is(iframe, video, embed, object) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 900px) {
	.sr-virtual { padding: 88px 0; }
}

/* ---- Visiting ----------------------------------------------------------- */

.sr-visit {
	padding: 56px 0;
	background: var(--sr-band-blue);
}

.sr-visit__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.sr-visit__card {
	background: #fff;
	border-radius: 4px;
	padding: 28px 24px;
}

.sr-visit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--sr-band-blue);
	color: var(--sr-navy);
}

.sr-visit__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--sr-navy);
}

.sr-visit__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--sr-muted);
}

.sr .sr-visit__link {
	display: inline-block;
	margin-top: 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--sr-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.sr-visit__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.sr-visit { padding: 88px 0; }
}

/* ---- Booking ------------------------------------------------------------ */

.sr-booking { padding: 56px 0; }

.sr-booking__panel {
	background: var(--sr-navy);
	color: #fff;
	border-radius: 4px;
	padding: 36px 24px;
	display: grid;
	gap: 32px;
}

.sr-booking__heading {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
}

.sr-booking__text {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 46ch;
}

.sr-booking__points {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.sr-booking__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.sr-booking__points svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--sr-lightblue);
}

.sr-booking__alt {
	margin: 20px 0 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
}

.sr .sr-booking__alt a { color: var(--sr-lightblue); text-decoration: underline; text-underline-offset: 3px; }

/* --- Gravity Forms inside the panel ---
   Gravity Forms' theme.min.css and desktop.css's own GF rules both load after
   this stylesheet, so every override below carries `body` + `.gravity-theme`
   weight to win on specificity rather than source order. Without it the rules
   silently do nothing. */

body .sr-booking__form .gform_wrapper.gravity-theme { margin: 0; }

body .sr-booking__form .gform_wrapper.gravity-theme .gform_fields {
	display: grid;
	row-gap: 18px;
	column-gap: 16px;
	margin: 0;
	padding: 0;
}

body .sr-booking__form .gform_wrapper.gravity-theme .gfield { margin: 0; padding: 0; }

body .sr-booking__form .gform_wrapper.gravity-theme .gform_validation_container,
body .sr-booking__form .gform_wrapper.gravity-theme .gfield--type-honeypot { display: none !important; }

body .sr-booking__form .gform_wrapper.gravity-theme :is(.gfield_label, .gform-field-label) {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

body .sr-booking__form .gform_wrapper.gravity-theme :is(.gfield_required, .gfield_required *) {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
}

/* desktop.css styles GF inputs through a six-long :not([attr]) chain scoring
   (0,7,2); the chain is repeated here so these keep their border and padding. */
body .sr-booking__form .gform_wrapper.gravity-theme input[type=text]:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
body .sr-booking__form .gform_wrapper.gravity-theme input[type=email]:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
body .sr-booking__form .gform_wrapper.gravity-theme input[type=tel]:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
body .sr-booking__form .gform_wrapper.gravity-theme input[type=date]:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
body .sr-booking__form .gform_wrapper.gravity-theme textarea,
body .sr-booking__form .gform_wrapper.gravity-theme select {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	background: #fff;
	color: var(--sr-navy);
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
	line-height: 1.2;
}

body .sr-booking__form .gform_wrapper.gravity-theme textarea { min-height: 120px; }

body .sr-booking__form .gform_wrapper.gravity-theme input::placeholder { color: #6b7086; opacity: 1; }

/* GF's datepicker trigger is an <img> pointing at the plugin's own SVG, whose
   single path is filled #23282D, so it all but vanishes against the navy
   panel. That file is shared with every other form on the site, so it is
   inverted to white here instead of being edited: brightness(0) flattens the
   artwork to black and invert(1) lifts it to white, leaving alpha intact. */
body .sr-booking__form .gform_wrapper.gravity-theme .ui-datepicker-trigger {
	width: 18px;
	height: 18px;
	margin-left: 10px;
	vertical-align: middle;
	cursor: pointer;
	filter: brightness(0) invert(1);
}

/* An outset ring would half-land on the navy panel and lose contrast, so the
   focus ring is drawn inside the white field. */
body .sr-booking__form .gform_wrapper.gravity-theme :is(input, textarea, select):focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--sr-navy), 0 0 0 2px var(--sr-lightblue);
}

body .sr-booking__form .gform_wrapper.gravity-theme .gfield_consent_description,
body .sr-booking__form .gform_wrapper.gravity-theme .field_description_below .gfield_consent_description {
	height: auto;
	max-height: none;
	overflow: visible;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.65);
}

body .sr-booking__form .gform_wrapper.gravity-theme .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* Radios (the preferred-time field). */
body .sr-booking__form .gform_wrapper.gravity-theme .gfield--type-radio .gchoice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

body .sr-booking__form .gform_wrapper.gravity-theme .gfield--type-radio label {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
}

/* Same inherited-geometry problem as the checkbox below: desktop.css:7666
   paints a 14px dot at top/left 6px, measured for its own 30px control, so in
   a 20px one it spills off the bottom right and reads as a crescent. */
body .sr-booking__form .gform_wrapper.gravity-theme input[type=radio]::after,
body .sr-booking__form .gform_wrapper.gravity-theme input[type=radio]::before {
	content: none;
}

body .sr-booking__form .gform_wrapper.gravity-theme input[type=radio] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
}

/* Light Blue field with a navy dot, matching the consent checkbox. The dot is
   a centred radial-gradient, so it scales with the control instead of being
   pinned to an edge. An inset box-shadow ring does not clip cleanly against
   the border here, which is why it is painted as a background. */
body .sr-booking__form .gform_wrapper.gravity-theme input[type=radio]:checked {
	background-color: var(--sr-lightblue);
	border-color: var(--sr-lightblue);
	background-image: radial-gradient(circle at center, var(--sr-navy) 0 4px, transparent 4.5px);
}

/* desktop.css:7654 draws the tick with absolute offsets measured for its own
   30px control, so in a 20px box it hangs over two edges. The pseudo-element
   is removed and the state painted below instead. */
body .sr-booking__form .gform_wrapper.gravity-theme input[type=checkbox]::after,
body .sr-booking__form .gform_wrapper.gravity-theme input[type=checkbox]::before {
	content: none;
}

/* GF sets appearance:none on these, which makes accent-color a no-op, so both
   states are painted here. */
body .sr-booking__form .gform_wrapper.gravity-theme input[type=checkbox] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
}

/* Light Blue fill with a navy tick, matching the submit button beneath it.
   The tick is an inlined SVG, so there is no extra request, and it is sized
   as a share of the box rather than pinned to an edge of it. */
body .sr-booking__form .gform_wrapper.gravity-theme input[type=checkbox]:checked {
	background-color: var(--sr-lightblue);
	border-color: var(--sr-lightblue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5' fill='none' stroke='%23181d46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 13px 13px;
}

body .sr-booking__form .gform_wrapper.gravity-theme .gform_footer { margin: 20px 0 0; padding: 0; }

body .sr-booking__form .gform_wrapper.gravity-theme .gform_footer :is(input[type=submit], button) {
	min-height: 48px;
	padding: 12px 32px;
	border: 0;
	border-radius: 2px;
	background: var(--sr-lightblue);
	color: var(--sr-navy);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	/* GF capitalises button text, which would undo the sentence-case work. */
	text-transform: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body .sr-booking__form .gform_wrapper.gravity-theme .gform_footer :is(input[type=submit], button):hover {
	background: #fff;
	color: var(--sr-navy);
	opacity: 1;
}

/* GF's stock validation is a white-and-red box and a solid red slab, both of
   which read as broken elements on navy. #ffc9be holds ~7:1 against #181d46. */
body .sr-booking__form .gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message) {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	color: #ffc9be;
}

body .sr-booking__form .gform_wrapper.gravity-theme .gform_validation_errors {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid #ffc9be;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
	color: #ffc9be;
	font-size: 14px;
}

body .sr-booking__form .gform_wrapper.gravity-theme .gform_validation_errors :is(h2, .gform_submission_error) {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #ffc9be;
}

.sr-booking__form .gform_confirmation_message {
	font-size: 17px;
	line-height: 1.5;
	color: #fff;
}

@media (min-width: 768px) {
	.sr-booking__panel { padding: 44px 40px; }
	body .sr-booking__form .gform_wrapper.gravity-theme .gform_fields { grid-template-columns: 1fr 1fr; }
	body .sr-booking__form .gform_wrapper.gravity-theme .gfield { grid-column: 1 / -1; }
	body .sr-booking__form .gform_wrapper.gravity-theme .gfield--width-half { grid-column: span 1; }
}

@media (min-width: 900px) {
	.sr-booking { padding: 88px 0; }

	.sr-booking__panel {
		grid-template-columns: 5fr 7fr;
		gap: 56px;
		align-items: start;
		padding: 56px;
	}

	.sr-booking__heading { font-size: 32px; }
}