/* LPJ Storefront: the About us and Contact us pages. Type, hairlines and one photograph each, with no
   containers. Written for phones first, then tablets, then desktops. */
.lpj-info {
	--ink: var(--lpj-ink);
	--paper: var(--lpj-white);
	--body: #3d3d3d;
	--soft: var(--lpj-soft);
	--line: var(--lpj-line);
	--display: "LPJ Menu", "Raleway", "Helvetica Neue", Arial, sans-serif;
	--gutter: 24px;
	--between: clamp(48px, 7vw, 112px);
	container-type: inline-size;
	font-size: 16px;
	line-height: 1.6;
}
.lpj-info svg { display: block; fill: currentColor; }

/* Opening */
.lpj-info .top, .lpj-info .reach { display: grid; grid-template-columns: minmax(0, 1fr); }
.lpj-info .hero {
	padding-block: 36px 28px;
	padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
/* The headline runs the full width on one line. --fit is how many times wider than its font size it is */
.lpj-info h1 {
	--room: calc(100cqi - 2 * var(--gutter));
	font: 300 min(var(--room) / var(--fit), 100px) / 1.08 var(--display);
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.lpj-info .hero p { max-width: 36em; margin-top: 14px; color: var(--body); text-wrap: pretty; }
.lpj-info .hero .lpj-cta { margin-top: 24px; }
.lpj-info .picture { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 44%; }

.lpj-info .facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-inline: var(--gutter);
	font-size: 12px;
	line-height: 1.35;
	color: var(--soft);
}
.lpj-info .facts b {
	display: block;
	margin-bottom: 4px;
	color: var(--ink);
	font: 300 28px/1.15 var(--display);
	font-feature-settings: "lnum";
	white-space: nowrap;
}

/* Buttons: the same as the product pages */
.lpj-info .lpj-cta { padding-inline: 12px; transition: background .2s, color .2s; }
.lpj-info .actions { display: grid; gap: 8px; margin-inline: var(--gutter); padding-top: 20px; }

.lpj-info .statement {
	padding-block: 28px 32px;
	padding-inline: var(--gutter);
	font: 300 clamp(22px, 6.2vw, 44px) / 1.28 var(--display);
	text-wrap: balance;
}

/* Sections are separated by a hairline and nothing else */
.lpj-info .block {
	margin-inline: var(--gutter);
	padding-block: 28px;
	border-top: 1px solid var(--line);
}
.lpj-info .block h2 {
	font: 300 22px/1.2 var(--display);
	text-transform: uppercase;
	text-wrap: balance;
}
.lpj-info .block > p { margin-top: 12px; color: var(--body); text-wrap: pretty; }
.lpj-info .block > p a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lpj-info .block > .more { margin-top: 16px; }
.lpj-info .block > :last-child.more { margin-bottom: -16px; }

/* The four services, said once and kept short */
.lpj-info #services { scroll-margin-top: calc(var(--lpjb-top, 0px) + 64px); }
.lpj-info .offers { display: grid; gap: 16px; margin-top: 14px; }
.lpj-info .offers h3 { font: 300 17px/1.3 var(--display); text-transform: uppercase; text-wrap: balance; }
.lpj-info .offers p { margin-top: 4px; color: var(--body); text-wrap: pretty; }

/* Watches stand straight on the page, without tiles */
.lpj-info .row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.lpj-info .row-head h2 { white-space: nowrap; }
.lpj-info .quiet { flex: none; margin-block: -12px; padding-block: 12px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lpj-info .marques {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 42%;
	gap: 4px;
	margin: 16px calc(var(--gutter) * -1) -8px;
	padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}
.lpj-info .marques::-webkit-scrollbar { display: none; }
.lpj-info .marques li { scroll-snap-align: start; }
.lpj-info .marques a { display: block; font-size: 14px; text-align: center; }
.lpj-info .marques img { width: 100%; height: auto; }

/* The same details control as the product pages */
.lpj-info .more summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}
.lpj-info .more summary::-webkit-details-marker { display: none; }
.lpj-info .more summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: -3px 4px 0 12px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s, margin .2s;
}
.lpj-info .more[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.lpj-info .more h3 { font-size: 14px; font-weight: 500; line-height: 1.4; }
.lpj-info .more p, .lpj-info .more ul { color: var(--body); font-size: 15px; line-height: 1.55; }
.lpj-info .more p + h3, .lpj-info .more ul + h3 { margin-top: 12px; }
.lpj-info .more .fine { margin-top: 12px; color: var(--soft); font-size: 13px; }
.lpj-info .more .lists { display: grid; gap: 12px; }
.lpj-info .more li + li { margin-top: 2px; }
.lpj-info .more-body { padding-bottom: 16px; }

/* Ways to reach us come first, because they are why people open this page */
.lpj-info .ways { margin-inline: var(--gutter); }
.lpj-info .ways li {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	align-items: center;
	border-top: 1px solid var(--line);
	font-size: 15px;
	line-height: 1.4;
}
.lpj-info .ways span { color: var(--soft); font-size: 13px; }
.lpj-info .ways a { padding-block: 13px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* A shallow map under the address. Tapping it opens Google Maps, and the page never gets stuck scrolling on it.
   Free Google embeds draw no pin, so ours sits at the centre, which the coordinates put on the building */
.lpj-info .map { position: relative; height: 156px; margin-inline: var(--gutter); overflow: hidden; background: var(--line); }
.lpj-info .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1); pointer-events: none; }
.lpj-info .map a { position: absolute; inset: 0; }
.lpj-info .map svg { position: absolute; top: 50%; left: 50%; width: 27px; height: 36px; color: var(--ink); stroke: var(--paper); stroke-width: 1.2; transform: translate(-50%, -100%); }
.lpj-info .map circle { fill: var(--paper); stroke: none; }

/* On phones the showroom words come first, then the stock photograph, then the form */
.lpj-info .showroom, .lpj-info .message { border-top: 0; }
.lpj-info .stock { width: 100%; height: auto; aspect-ratio: 899 / 1108; object-fit: cover; }

/* The site's contact form, with each field a single underline and never a box */
.lpj-info .wpforms-container { margin-top: 12px; }
.lpj-info .wpforms-field-container { display: grid; gap: 10px; }
.lpj-info .wpforms-field { position: relative; }
.lpj-info .wpforms-field-label { display: block; color: var(--soft); font-size: 13px; font-weight: 400; line-height: 1.4; }
.lpj-info .wpforms-required-label { display: none; }
.lpj-info .wpforms-hidden { display: none !important; }
.lpj-info .wpforms-field-hp { position: absolute !important; left: -9000px !important; display: none !important; }
.lpj-info .wpforms-field input, .lpj-info .wpforms-field textarea {
	display: block;
	width: 100%;
	padding: 4px 0 6px;
	border: 0;
	border-bottom: 1px solid var(--soft);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font: 400 16px/1.5 var(--lpj-font); /* Anything smaller makes iPhones zoom in on the field */
	-webkit-appearance: none;
	appearance: none;
}
.lpj-info .wpforms-field textarea { min-height: 60px; field-sizing: content; resize: none; }
.lpj-info .wpforms-field ::placeholder { color: transparent; }
.lpj-info label.wpforms-error, .lpj-info em.wpforms-error { display: block; margin-top: 4px; color: #b3261e; font-size: 13px; font-style: normal; line-height: 1.4; }
.lpj-info .wpforms-error-container { margin-bottom: 12px; color: #b3261e; font-size: 14px; }
.lpj-info .wpforms-submit-container { margin-top: 16px; }
.lpj-info .wpforms-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.lpj-info .wpforms-submit-spinner { display: none !important; }
.lpj-info .wpforms-confirmation-container-full { margin-top: 12px; color: var(--body); }

/* Footer: white here, like the shop */
.lpj-info .foot {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px 24px;
	margin-inline: var(--gutter);
	padding-block: 24px;
	border-top: 1px solid var(--line);
	color: var(--soft);
	font-size: 13px;
	line-height: 1.5;
}
.lpj-info .foot-logo img { width: 52px; height: 52px; filter: invert(1); }
.lpj-info .social { display: flex; gap: 2px; margin-right: -12px; color: var(--ink); }
.lpj-info .social a { display: grid; place-items: center; width: 44px; height: 44px; }
.lpj-info .social svg { width: 19px; height: 19px; }
.lpj-info .foot nav { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 4px 20px; color: var(--ink); font-size: 14px; }
.lpj-info .foot nav a { padding-block: 6px; }
.lpj-info .foot-small { grid-column: 1 / -1; margin-top: -8px; }

/* Large phones sideways, and tablets upright */
@media (min-width: 600px) {
	.lpj-info { --gutter: 40px; }
	.lpj-info .picture { aspect-ratio: 16 / 9; }
	.lpj-info .marques { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; overflow: visible; }
	.lpj-info .more .lists { grid-template-columns: 1fr 1fr; gap: 24px; }
	.lpj-info .actions { grid-template-columns: 1fr 1fr; }
	.lpj-info .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
	.lpj-info .hero .lpj-cta { width: fit-content; min-width: 280px; }
	.lpj-info .stock { justify-self: center; width: min(100%, 520px); }
	.lpj-info .wpforms-field-container { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
	.lpj-info .wpforms-field-container > :nth-child(n + 3) { grid-column: 1 / -1; }
}

/* Desktops, where the page margins match the menu bar's */
@media (min-width: 922px) {
	.lpj-info { --gutter: max(5cqi, calc((100cqi - 1560px) / 2)); }

	.lpj-info .top, .lpj-info .reach { column-gap: var(--between); }
	.lpj-info .hero { display: contents; }
	.lpj-info h1 { grid-column: 1 / -1; }
	.lpj-info .hero p { margin: 0; font-size: 18px; }
	.lpj-info .facts { gap: 32px; margin: 0; font-size: 13px; }
	.lpj-info .facts b { font-size: 34px; }
	.lpj-info .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
	.lpj-info .statement { padding: 0; font-size: clamp(26px, 2.6vw, 38px); }
	.lpj-info .block h2 { font-size: 28px; }
	.lpj-info #services { scroll-margin-top: calc(var(--lpjb-top, 0px) + 80px); }
	.lpj-info .top + .block { margin-top: 56px; }

	/* About us: a wide photograph under the bar, then the words in two columns */
	.lpj-info .top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(5, auto); padding: 0 var(--gutter); }
	.lpj-info .picture {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100cqi;
		max-width: none;
		max-height: 620px;
		margin-left: calc(var(--gutter) * -1);
		aspect-ratio: 5 / 2;
		object-position: 50% 46%;
	}
	.lpj-info .top h1 { grid-row: 2; margin-block: 44px 24px; }
	.lpj-info .top .hero p { grid-column: 1; grid-row: 3 / 5; }
	.lpj-info .facts { grid-column: 2; grid-row: 3; }
	.lpj-info .actions { grid-column: 2; grid-row: 4; }
	.lpj-info .statement { grid-column: 1 / -1; grid-row: 5; max-width: 26em; padding-top: 44px; }

	/* Contact us: ways to reach us beside the map, the showroom and form beside the stock photograph */
	.lpj-info .reach { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr auto auto; padding: 48px var(--gutter) 0; }
	.lpj-info .reach h1 { grid-row: 1; margin-bottom: 28px; }
	.lpj-info .reach .hero p { grid-column: 1; grid-row: 2; }
	.lpj-info .reach .hero .lpj-cta { grid-column: 1; grid-row: 3; margin-top: 20px; }
	.lpj-info .ways { grid-column: 1; grid-row: 4; margin: 28px 0 0; }
	.lpj-info .map { grid-column: 2; grid-row: 2 / 5; height: auto; min-height: 280px; margin: 0; }
	.lpj-info .showroom, .lpj-info .message { grid-column: 1; margin-inline: 0; border-top: 1px solid var(--line); }
	.lpj-info .showroom { grid-row: 5; margin-top: 48px; }
	.lpj-info .message { grid-row: 6; }
	.lpj-info .stock { grid-column: 2; grid-row: 5 / 7; align-self: start; justify-self: stretch; width: 100%; margin-top: 48px; }

	.lpj-info .offers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 40px; }
	.lpj-info .offers li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
	.lpj-info .offers h3 { font-size: 18px; }
	.lpj-info .offers p { margin-top: 0; }

	.lpj-info .pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 56px;
		align-items: start;
		margin-inline: var(--gutter);
	}
	.lpj-info .pair .block { margin-inline: 0; }
	.lpj-info .marques { gap: 32px; }

	.lpj-info .foot { grid-template-columns: auto 1fr auto; column-gap: 32px; margin-top: 40px; }
	.lpj-info .foot nav { grid-column: 2; grid-row: 1; }
	.lpj-info .foot-logo { grid-column: 1; grid-row: 1 / 3; }
	.lpj-info .foot-small { grid-column: 2; margin-top: -16px; }
	.lpj-info .social { grid-column: 3; grid-row: 1 / 3; }
}
@media (min-width: 1100px) {
	.lpj-info { --gutter: max(8cqi, calc((100cqi - 1560px) / 2)); }
}

/* Mouse and trackpad only, so taps never leave a stuck hover state */
@media (hover: hover) {
	.lpj-info .foot nav a:hover, .lpj-info .marques a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
	.lpj-info .quiet:hover, .lpj-info .ways a:hover { text-decoration-thickness: 2px; }
	.lpj-info .lpj-cta:hover, .lpj-info .wpforms-submit:hover { background: var(--ink); color: var(--paper); }
	.lpj-root .lpj-info .lpj-cta.is-solid:hover, .lpj-info .wpforms-submit:hover { background: var(--paper); color: var(--ink); }
}

@media (prefers-reduced-motion: no-preference) {
	@supports (interpolate-size: allow-keywords) {
		.lpj-info .more { interpolate-size: allow-keywords; }
		.lpj-info .more::details-content { block-size: 0; overflow: clip; transition: block-size .25s ease, content-visibility .25s allow-discrete; }
		.lpj-info .more[open]::details-content { block-size: auto; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.lpj-info .more summary::after, .lpj-info .lpj-cta, .lpj-info .wpforms-submit { transition: none; }
}