/*
 * MSCC Calendar — theme styles.
 *
 * Built from the approved design canvas. Section order and every stated value
 * follow it. The canvas is a fixed 1440px board, so it says nothing about
 * narrow screens: anything under the desktop breakpoint is marked "not in the
 * canvas" and is mine, kept as close to the approved look as the width allows.
 */

/* ── Reset and base ────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--mc-paper);
	font-family: var(--mc-font-body);
	font-size: var(--mc-fs-body);
	line-height: var(--mc-lh-body);
	color: var(--mc-text);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--mc-blue); text-decoration: none; }
a:hover { color: var(--mc-blue-dark); text-decoration: underline; }

h1, h2, h3 {
	font-family: var(--mc-font-display);
	line-height: var(--mc-lh-h2);
	margin: 0 0 var(--mc-s-4);
	color: var(--mc-ink);
}

p { margin: 0 0 var(--mc-s-4); }

details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }

:focus-visible { outline: 3px solid var(--mc-cyan); outline-offset: 2px; border-radius: var(--mc-r-sm); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: var(--mc-s-4); top: var(--mc-s-4);
	z-index: 300; background: var(--mc-ink); color: var(--mc-paper);
	padding: var(--mc-s-3) var(--mc-s-4); border-radius: var(--mc-r-md);
}

.skip-link:focus { clip: auto; clip-path: none; width: auto; height: auto; margin: 0; }

.wrap {
	width: 100%;
	max-width: var(--mc-wrap);
	margin-inline: auto;
	padding-inline: var(--mc-gutter);
}

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-s-3);
	min-height: 44px;
	border: 0;
	border-radius: var(--mc-r-pill);
	font-family: var(--mc-font-body);
	font-weight: 700;
	letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--mc-t-fast) var(--mc-ease), color var(--mc-t-fast) var(--mc-ease);
}

.btn:hover { text-decoration: none; }
.btn__icon { width: 20px; height: 20px; flex: 0 0 20px; }

/* Header: blue, 13px, 13/26 padding. */
.btn--buy {
	background: var(--mc-blue); color: var(--mc-paper);
	padding: 13px 26px; font-size: var(--mc-fs-xs);
}
.btn--buy:hover { background: var(--mc-blue-dark); color: var(--mc-paper); }

/* Hero: ink, 15px, 20/42 padding, no icon. The hero sits on a pale wash, so
   a pale button would not read as a button there. */
.btn--hero {
	background: var(--mc-ink); color: var(--mc-paper);
	padding: 20px 42px; font-size: var(--mc-fs-ui);
}
.btn--hero:hover { background: #16222E; color: var(--mc-paper); }

/* Pitch: blue, 14px, 17/34 padding. */
.btn--solid {
	background: var(--mc-blue); color: var(--mc-paper);
	padding: 17px 34px; font-size: var(--mc-fs-sm);
}
.btn--solid:hover { background: var(--mc-blue-dark); color: var(--mc-paper); }

/* Closing band: accent on ink, 14px, 18/34 padding, with the arrow icon. */
.btn--cta {
	background: var(--mc-accent); color: var(--mc-ink);
	padding: 18px 34px; font-size: var(--mc-fs-sm);
}
.btn--cta:hover { background: var(--mc-accent-dark); color: var(--mc-ink); }

.btn.is-disabled { background: var(--mc-line); color: var(--mc-text-muted); pointer-events: none; }
.btn.is-busy { opacity: 0.65; pointer-events: none; }

/* ── Announcement bar ──────────────────────────────────────────────── */

.announce {
	background: var(--mc-ink);
	color: var(--mc-paper);
	padding: 11px var(--mc-gutter);
}

.announce__inner { padding-inline: 0; }

.announce__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	justify-content: center; align-items: center;
	/* The separator is its own flex item on the canvas, so the 28px sits on
	   both sides of it rather than all on one side. */
	gap: 8px 0;
	font-size: var(--mc-fs-label);
	font-weight: 600;
	letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
}

.announce__item { display: flex; align-items: center; }

.announce__item + .announce__item::before {
	content: "\00b7";
	color: var(--mc-accent);
	padding: 0 28px;
}

/* ── Header ────────────────────────────────────────────────────────── */

.site-header {
	position: sticky; top: 0; z-index: var(--mc-z-header);
	background: var(--mc-paper);
	border-bottom: 1px solid var(--mc-line);
}

.site-header__inner {
	height: var(--mc-header-h);
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--mc-s-6);
}

.site-logo {
	display: flex; align-items: center; gap: 14px;
	text-decoration: none; color: var(--mc-ink); flex: 0 0 auto;
}
.site-logo:hover { text-decoration: none; }
.site-logo img { width: 52px; height: 52px; }

.site-logo__text {
	font-family: var(--mc-font-display);
	font-size: var(--mc-wordmark);
	font-weight: 700;
	letter-spacing: 0.005em;
	line-height: 1;
	white-space: nowrap;
}

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }

/* Sentence case with an icon, not uppercase. */
.site-nav__link {
	display: flex; align-items: center; gap: 7px;
	color: var(--mc-text);
	font-size: var(--mc-fs-link);
	font-weight: 600;
	text-decoration: none;
}
.site-nav__link:hover { color: var(--mc-ink); text-decoration: none; }
.site-nav__link.is-current { color: var(--mc-teal); }
.site-nav__icon { width: 19px; height: 19px; flex: 0 0 19px; }

.site-header__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.cart-toggle {
	position: relative;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mc-paper);
	border: 1px solid var(--mc-line);
	border-radius: 50%;
	color: var(--mc-ink);
	cursor: pointer;
}
.cart-toggle:hover { border-color: #C6CEDA; }
.cart-toggle__icon { width: 20px; height: 20px; }

.cart-toggle__count {
	position: absolute; top: -3px; right: -3px;
	min-width: 19px; height: 19px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mc-cyan);
	color: var(--mc-ink);
	border-radius: var(--mc-r-pill);
	font-size: var(--mc-fs-badge);
	font-weight: 700;
	line-height: 1;
}
.cart-toggle__count:empty { display: none; }

/* Not in the canvas: the board is desktop only and has no menu button. */
.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: var(--mc-paper);
	border: 1px solid var(--mc-line);
	border-radius: 50%;
	cursor: pointer;
}

.nav-toggle__bars { display: block; width: 20px; }
.nav-toggle__bars span {
	display: block; height: 2px; background: var(--mc-ink); border-radius: 2px;
	transition: transform var(--mc-t-fast) var(--mc-ease), opacity var(--mc-t-fast) var(--mc-ease);
}
.nav-toggle__bars span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { border-top: 1px solid var(--mc-line); background: var(--mc-paper); }
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { list-style: none; margin: 0; padding: var(--mc-s-2) var(--mc-gutter) var(--mc-s-4); }

.mobile-nav__link {
	display: flex; align-items: center; gap: var(--mc-s-3);
	padding: var(--mc-s-4) 0;
	border-bottom: 1px solid var(--mc-line);
	color: var(--mc-ink); font-weight: 600; text-decoration: none;
}
.mobile-nav__link--buy { color: var(--mc-blue); border-bottom: 0; }
.mobile-nav__icon { width: 20px; height: 20px; color: var(--mc-teal); }

@media (max-width: 900px) {
	.site-nav { display: none; }
	.nav-toggle { display: inline-flex; }
	.site-logo img { width: 44px; height: 44px; }
	.site-logo__text { font-size: 18px; }
}

@media (max-width: 560px) {
	.btn--buy { display: none; }
	.site-logo__text { display: none; }
	.announce__list { font-size: 11px; }
	.announce__item + .announce__item::before { padding: 0 12px; }
	.announce__item:nth-child(n+3) { display: none; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--mc-hero-base);
	padding: var(--mc-hero-top) 0 var(--mc-hero-bottom);
}

.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The supplied photograph is a pale wall, so the wash is white, not ink. */
.hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(95deg,
		rgba(255, 255, 255, 0.80) 0%,
		rgba(255, 255, 255, 0.52) 42%,
		rgba(255, 255, 255, 0.10) 68%,
		rgba(255, 255, 255, 0) 100%);
}

.hero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--mc-hero-gap); }

/*
 * The canvas caps the copy at 610px. Measured with Playfair Display 400 at
 * 58px, "The Morgan Sports Car" is 606.7px, which leaves 3.3px before the
 * line breaks and orphans "Car". That is too tight to ship, so the cap is
 * 640px. The image is 400px and the gap 64px, so 640 still fits the 1180
 * wrapper with room to spare.
 */
.hero__copy { flex-grow: 1; max-width: var(--mc-hero-copy); }

.hero__badge {
	display: inline-block;
	margin: 0 0 22px;
	padding: 9px 16px;
	background: var(--mc-ink);
	color: var(--mc-paper);
	border-radius: var(--mc-r-pill);
	font-size: var(--mc-fs-label);
	font-weight: 700;
	letter-spacing: var(--mc-track-badge);
	text-transform: uppercase;
}

.hero__title {
	margin: 0 0 22px;
	font-family: var(--mc-font-display);
	font-weight: 400;
	font-size: var(--mc-h1);
	line-height: var(--mc-lh-h1);
	letter-spacing: 0.005em;
	color: var(--mc-ink);
}

.hero__standfirst {
	margin: 0 0 20px;
	font-size: var(--mc-fs-standfirst);
	font-weight: 300;
	line-height: var(--mc-lh-snug);
	color: var(--mc-teal-dark);
}

.hero__intro {
	margin: 0 0 34px;
	max-width: 500px;
	font-size: var(--mc-fs-body);
	line-height: 1.65;
	color: var(--mc-text-soft);
}

.hero__actions { display: flex; align-items: center; gap: var(--mc-s-5); flex-wrap: wrap; }

.hero__note { margin: 0; font-size: var(--mc-fs-sm); line-height: 1.55; }
.hero__note strong { display: block; color: var(--mc-ink); font-weight: 700; }
.hero__note span { display: block; color: var(--mc-text-faint); }

.hero__object { flex-shrink: 0; width: var(--mc-hero-image); text-align: center; margin: 0; }
.hero__calendar { width: var(--mc-hero-image); height: auto; }

.hero__caption {
	margin: 12px auto 0;
	max-width: 360px;
	font-size: var(--mc-fs-label);
	line-height: 1.5;
	color: var(--mc-text-soft);
}
.hero__caption strong { color: var(--mc-ink); }

/* Not in the canvas. */
@media (max-width: 1040px) {
	.hero { padding: 56px 0 64px; }
	.hero__inner { flex-direction: column; align-items: flex-start; gap: var(--mc-s-7); }
	.hero__copy { max-width: none; }
	.hero__object { width: 100%; max-width: 400px; align-self: center; }
	.hero__title { font-size: clamp(38px, 5.4vw, 58px); }
	/* The canvas break orphans "Car" once the column is under about 610px,
	   so below that the line is balanced instead of forced. */
	.hero__title br { display: none; }
	.hero__title { text-wrap: balance; }
	.hero__intro { max-width: none; }
}

/* ── Pitch ─────────────────────────────────────────────────────────── */

.pitch { background: var(--mc-paper); padding-block: var(--mc-section-y); }

/* Photograph on the left, copy on the right. */
.pitch__inner { display: flex; align-items: center; gap: var(--mc-pitch-gap); }

.pitch__figure {
	flex-shrink: 0;
	width: var(--mc-pitch-image-w);
	height: var(--mc-pitch-image-h);
	margin: 0;
	border-radius: var(--mc-r-lg);
	overflow: hidden;
	box-shadow: var(--mc-shadow-pitch);
}

.pitch__image { width: 100%; height: 100%; object-fit: cover; }

.pitch__copy { flex-grow: 1; }

.pitch__title {
	margin: 0 0 20px;
	font-size: var(--mc-h2-pitch);
	font-weight: 700;
	line-height: var(--mc-lh-h2);
}

.pitch__para { margin: 0 0 var(--mc-s-4); font-size: var(--mc-fs-body); line-height: var(--mc-lh-body); color: var(--mc-text-muted); }
.pitch__para:last-of-type { margin-bottom: 28px; }

@media (max-width: 1040px) {
	.pitch { padding-block: 56px; }
	.pitch__inner { flex-direction: column; align-items: stretch; gap: var(--mc-s-7); }
	.pitch__figure { width: 100%; height: auto; aspect-ratio: 540 / 372; }
	.pitch__title { font-size: 30px; }
}

/* ── Photo strip ───────────────────────────────────────────────────── */

.strip__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
}

.strip__item { position: relative; height: var(--mc-strip-h); overflow: hidden; background: var(--mc-strip-base); }
.strip__image { width: 100%; height: 100%; object-fit: cover; }

/* One thin dark band under the photographs, carrying the caveat. */
.strip__note-band { background: var(--mc-ink); padding: 20px var(--mc-gutter); }

.strip__note {
	max-width: var(--mc-wrap);
	margin: 0 auto;
	text-align: center;
	font-size: var(--mc-fs-label);
	letter-spacing: var(--mc-track-strip);
	line-height: 1.5;
	color: var(--mc-text-strip);
}

@media (max-width: 900px) {
	.strip__list { grid-template-columns: repeat(3, 1fr); }
	.strip__item { height: 180px; }
	.strip__item:nth-child(n+4) { display: none; }
}

@media (max-width: 560px) {
	.strip__list { grid-template-columns: repeat(2, 1fr); }
	.strip__item:nth-child(n+3) { display: none; }
	.strip__note { text-align: left; }
}

/* ── Lower band: how it works, and the questions ───────────────────── */

/*
 * One section, two columns. The steps are a fixed 430px list on the left and
 * the questions fill what is left. They share a top edge and a left edge with
 * everything else on the page.
 */
.lower { background: var(--mc-paper); padding-block: var(--mc-section-y); }

.lower__inner { display: flex; align-items: flex-start; gap: var(--mc-lower-gap); }

.steps { flex-shrink: 0; width: var(--mc-steps-col); }

.steps__title { margin: 0 0 10px; font-size: var(--mc-h2); font-weight: 700; line-height: var(--mc-lh-h2); }
.steps__intro { margin: 0 0 var(--mc-s-6); font-size: var(--mc-fs-ui); line-height: 1.6; color: var(--mc-text-muted); }

.steps__list { list-style: none; margin: 0; padding: 0; }

.steps__item { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 26px; }
.steps__item:last-child { padding-bottom: 0; }

.steps__n {
	flex-shrink: 0;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--mc-ink);
	color: var(--mc-paper);
	font-size: var(--mc-fs-ui);
	font-weight: 700;
	line-height: 1;
}

.steps__body { min-width: 0; }

.steps__when {
	display: block;
	margin-bottom: 5px;
	font-size: var(--mc-fs-label);
	font-weight: 700;
	letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
	color: var(--mc-teal);
}

.steps__what { display: block; font-size: var(--mc-fs-ui); line-height: 1.6; color: var(--mc-text); }

.faq { flex-grow: 1; min-width: 0; }

.faq__title { margin: 0 0 26px; font-size: var(--mc-h2); font-weight: 700; line-height: var(--mc-lh-h2); }

.faq__item { border-bottom: 1px solid var(--mc-line); }

.faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 18px 0;
	font-family: var(--mc-font-body);
	font-size: var(--mc-fs-body);
	font-weight: 600;
	color: var(--mc-ink);
}

/* A chevron that turns over, not a plus and minus. */
.faq__chevron {
	flex: 0 0 20px; width: 20px; height: 20px;
	color: var(--mc-teal);
	transition: transform var(--mc-t-base) var(--mc-ease);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__a { padding: 0 0 20px; }
.faq__a p { margin: 0; font-size: var(--mc-fs-ui); line-height: var(--mc-lh-faq); color: var(--mc-text-muted); }

@media (max-width: 1040px) {
	.lower { padding-block: 56px; }
	.lower__inner { flex-direction: column; gap: var(--mc-s-7); }
	.steps { width: 100%; }
	.faq { width: 100%; }
	.steps__title, .faq__title { font-size: 28px; }
}

/* ── Closing band ──────────────────────────────────────────────────── */

.cta-band { background: var(--mc-ink); padding-block: 60px; }

.cta-band__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 40px; flex-wrap: wrap;
}

.cta-band__text {
	margin: 0;
	font-family: var(--mc-font-display);
	font-weight: 400;
	font-size: var(--mc-cta);
	line-height: 1.2;
	color: var(--mc-paper);
}
.cta-band__text:empty { display: none; }

@media (max-width: 720px) {
	.cta-band { padding-block: 48px; }
	.cta-band__inner { flex-direction: column; align-items: flex-start; gap: var(--mc-s-5); }
	.cta-band__text { font-size: 26px; }
}

/* ── Footer ────────────────────────────────────────────────────────── */

/* A light teal gradient with dark text, not a dark band. */
.site-footer {
	margin-top: auto;
	background: linear-gradient(90deg, var(--mc-accent-light) 0%, var(--mc-cyan) 100%);
	padding: 56px 0 40px;
}

.site-footer__inner {
	display: flex; justify-content: space-between;
	gap: var(--mc-s-7); flex-wrap: wrap;
	padding-bottom: 36px;
}

.site-footer__brand { max-width: 360px; }

.site-footer__title {
	margin: 0 0 10px;
	font-family: var(--mc-font-display);
	font-size: var(--mc-footer-title);
	font-weight: 700;
	color: var(--mc-ink);
}

.site-footer__blurb { margin: 0; font-size: var(--mc-fs-sm); line-height: 1.6; color: var(--mc-teal-deep); }

.site-footer__heading {
	margin: 0 0 var(--mc-s-3);
	font-family: var(--mc-font-body);
	font-size: var(--mc-fs-label);
	font-weight: 700;
	letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
	color: var(--mc-teal-deep);
}

.site-footer__line { margin: 0 0 5px; font-size: var(--mc-fs-sm); color: var(--mc-ink); }
.site-footer__line:last-child { margin-bottom: 0; }
.site-footer__line a { color: var(--mc-ink); text-decoration: none; }
.site-footer__line a:hover { color: var(--mc-ink); text-decoration: underline; }

.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.site-footer__list a { font-size: var(--mc-fs-sm); font-weight: 700; color: var(--mc-ink); text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; color: var(--mc-ink); }

.site-footer__base {
	border-top: 1px solid rgba(9, 54, 66, 0.28);
	padding-top: 22px;
	font-size: var(--mc-fs-xs);
	color: var(--mc-teal-deep);
}

.site-footer__copy { margin: 0; }

@media (max-width: 720px) {
	.site-footer__inner { flex-direction: column; gap: var(--mc-s-6); }
	.site-footer__list { gap: 18px; }
}

/* ── Page banner and policy pages (not in the canvas) ──────────────── */

.page-banner { background: var(--mc-ink); color: var(--mc-paper); padding-block: var(--mc-s-8); }
.page-banner__title { margin: 0; font-size: var(--mc-h2-pitch); font-weight: 700; color: var(--mc-paper); }
.page-banner__sub { margin: var(--mc-s-3) 0 0; color: var(--mc-accent); }

.pg { padding-block: var(--mc-s-8); }
.pg__inner { max-width: var(--mc-wrap-narrow); }

.pg-section { margin-bottom: var(--mc-s-7); }
.pg-section h2 { font-size: 24px; font-weight: 700; }
.pg-section p { color: var(--mc-text-muted); }

.pg-list { margin: 0 0 var(--mc-s-4); padding-left: var(--mc-s-5); color: var(--mc-text-muted); }
.pg-list li { margin-bottom: var(--mc-s-2); }

.pg-address {
	font-style: normal; padding: var(--mc-s-4);
	border-left: 3px solid var(--mc-teal);
	background: #F7F8FA; color: var(--mc-text-muted);
}

/* mc_cancellation_html() is inline-styled because it is also sent by email. */
.pg-section--form > div { max-width: 100%; }

.pg-updated { font-size: var(--mc-fs-sm); color: var(--mc-text-faint); }

/* ── Contact page ──────────────────────────────────────────────────── */

/* Photographic banner, as on the Morgan Book contact page. */
.page-banner--image {
	position: relative;
	overflow: hidden;
	padding-block: clamp(80px, 12vw, 150px);
	text-align: center;
}

.page-banner__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

.page-banner--image::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(5, 10, 19, 0.55) 0%, rgba(5, 10, 19, 0.35) 100%);
}

.page-banner--image .wrap { position: relative; z-index: 1; }

.page-banner--image .page-banner__title {
	font-weight: 400;
	font-size: clamp(38px, 5.4vw, 58px);
	letter-spacing: 0.005em;
}

/*
 * The band under the banner. Morgan Book sets light text on this gradient,
 * which fails contrast badly, so this uses ink like the footer does.
 */
.contact-band {
	background: linear-gradient(90deg, var(--mc-accent-light) 0%, var(--mc-cyan) 100%);
	padding-block: 44px;
}

.contact-band__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 40px; flex-wrap: wrap;
}

.contact-band__text {
	margin: 0;
	max-width: 58ch;
	font-family: var(--mc-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.4;
	color: var(--mc-ink);
}

.contact { padding-block: var(--mc-section-y); }

/* Organisations on the left, form on the right. */
.contact__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--mc-lower-gap);
}

.contact__who { flex-shrink: 0; width: 370px; }

.contact__block { margin-bottom: var(--mc-s-7); }
.contact__block:last-child { margin-bottom: 0; }

.contact__block-title {
	margin: 0 0 var(--mc-s-4);
	font-size: var(--mc-footer-title);
	font-weight: 700;
	line-height: var(--mc-lh-h2);
}

.contact__mark { display: block; margin-bottom: var(--mc-s-5); }
.contact__mark img { width: 140px; height: auto; }

.contact__line {
	margin: 0 0 var(--mc-s-4);
	font-size: var(--mc-fs-sm);
	line-height: 1.6;
	color: var(--mc-blue);
}
.contact__line a { color: var(--mc-blue); }

.contact__note {
	margin: 0 0 var(--mc-s-3);
	font-size: var(--mc-fs-sm);
	line-height: 1.6;
	color: var(--mc-text);
}
.contact__note:last-child { margin-bottom: 0; }

.contact__form { flex-grow: 1; min-width: 0; }

.contact__heading {
	margin: 0 0 var(--mc-s-4);
	font-size: var(--mc-h2);
	font-weight: 700;
	line-height: var(--mc-lh-h2);
}

.contact__form > p { font-size: var(--mc-fs-sm); line-height: 1.6; color: var(--mc-text); }
.contact__email { margin-bottom: var(--mc-s-6); }

@media (max-width: 1040px) {
	.contact { padding-block: 56px; }
	.contact__inner { flex-direction: column; gap: var(--mc-s-7); }
	.contact__who { width: 100%; }
	.contact__form { width: 100%; }
	.contact-band { padding-block: 32px; }
	.contact-band__text { font-size: 19px; }
}

/* ── Forms ─────────────────────────────────────────────────────────── */

.pg-form { margin: var(--mc-s-5) 0 0; }

.pg-form input[type="text"],
.pg-form input[type="email"],
.pg-form input[type="tel"],
.pg-form textarea,
.pg-form select {
	width: 100%;
	padding: 14px var(--mc-s-4);
	margin-bottom: var(--mc-s-3);
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-r-sm);
	font-family: inherit;
	font-size: var(--mc-fs-sm);
	background: var(--mc-paper);
	color: var(--mc-ink);
}

.pg-form textarea { min-height: 200px; resize: vertical; }

.pg-form ::placeholder { color: var(--mc-text-faint); opacity: 1; }

.pg-form label { display: block; margin-bottom: var(--mc-s-2); font-size: var(--mc-fs-sm); font-weight: 600; }

/* Pale button with dark text, as on the Morgan Book form. */
.pg-form input[type="submit"],
.pg-form button[type="submit"] {
	min-height: 44px;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--mc-r-sm);
	background: var(--mc-accent);
	color: var(--mc-ink);
	font-family: inherit;
	font-size: var(--mc-fs-body);
	font-weight: 600;
	cursor: pointer;
	width: auto;
}

.pg-form input[type="submit"]:hover,
.pg-form button[type="submit"]:hover { background: var(--mc-accent-dark); }

.pg-email { margin-top: var(--mc-s-5); color: var(--mc-text-muted); }

/*
 * FormLayer specifics.
 *
 * Its stylesheet is served cross-origin, so its rules cannot be read from the
 * page and cannot reliably be outranked: an !important override on the inputs
 * was measured on the live site and still lost. So rather than fight it, these
 * rules work with the 12px it puts under every input and set the wrappers to
 * suit. Measured result: an even 16px between every field.
 *
 * If FormLayer is ever swapped out, delete this block.
 */

/* It repeats the placeholder as a small caps label UNDER the name fields. */
.pg-form .formlayer-sub-label { display: none !important; }

/* 12px from FormLayer plus 4px here gives the 16px gap. */
.pg-form .formlayer-field-wrap { margin-bottom: 4px !important; }
.pg-form .formlayer-sub-field { margin-bottom: 0 !important; }
.pg-form .formlayer-name-fields-wrap { gap: 4px !important; }

/* ── Pre-order notices ─────────────────────────────────────────────── */

.mc-preorder {
	margin: 0 0 var(--mc-s-5);
	padding: var(--mc-s-4) var(--mc-s-5);
	border: 2px solid var(--mc-cyan);
	border-radius: var(--mc-r-md);
	background: var(--mc-tint);
}

.mc-preorder__text { margin: 0; font-size: var(--mc-fs-sm); line-height: 1.6; color: var(--mc-ink); }
.mc-preorder--drawer { margin: 20px 0 0; padding: 14px var(--mc-s-4); }
.mc-preorder--drawer .mc-preorder__text { font-size: var(--mc-fs-xs); }

/* ── Basket drawer ─────────────────────────────────────────────────── */

.cart-drawer { position: fixed; inset: 0; z-index: var(--mc-z-drawer); }
.cart-drawer[hidden] { display: none; }

.cart-drawer__backdrop {
	position: absolute; inset: 0;
	background: rgba(5, 10, 19, 0.5);
	opacity: 0;
	transition: opacity var(--mc-t-base) var(--mc-ease);
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__panel {
	position: absolute; top: 0; right: 0;
	width: min(420px, 100vw); height: 100%;
	display: flex; flex-direction: column;
	background: var(--mc-paper);
	box-shadow: var(--mc-shadow-drawer);
	transform: translateX(100%);
	transition: transform var(--mc-t-slow) var(--mc-ease);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: var(--mc-s-4);
	padding: var(--mc-s-5);
	border-bottom: 1px solid var(--mc-line);
}

.cart-drawer__title { margin: 0; font-size: 21px; font-weight: 700; }

.cart-drawer__close {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 26px; line-height: 1;
	background: transparent; border: 1px solid var(--mc-line); border-radius: 50%;
	color: var(--mc-text-muted); cursor: pointer;
}
.cart-drawer__close:hover { color: var(--mc-ink); }

.cart-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 28px var(--mc-s-5) var(--mc-s-6);
	-webkit-overflow-scrolling: touch;
}

/* ── Mini cart ─────────────────────────────────────────────────────── */

/*
 * Laid out against the markup WooCommerce actually emits, which was inspected
 * on the live site rather than assumed. Each basket row has four direct
 * children, in this order:
 *
 *   a.remove            the ×
 *   a                   the thumbnail AND the product name, in one anchor
 *   span.mc-qty-price   our price line
 *   span.mc-qty         our stepper
 *
 * The image is inside the anchor, so it is not a grid item and cannot be
 * placed on its own. The anchor is therefore a flex row, and the four
 * children are placed by class rather than by source order.
 */

.cart-drawer .woocommerce-mini-cart,
.cart-drawer ul.cart_list { list-style: none; margin: 0; padding: 0; }

.cart-drawer .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--mc-s-3);
	row-gap: 14px;
	align-items: center;
	padding: 0 0 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--mc-line);
}

/* The subtotal carries its own top rule, so the last row must not add one. */
.cart-drawer .woocommerce-mini-cart-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* The "Pre-order: Posted by ..." item line is for checkout and emails. The
   drawer already carries the full pre-order notice, and the line would land
   in the item grid unplaced. */
.cart-drawer .woocommerce-mini-cart-item dl.variation { display: none; }

/* Thumbnail and name, side by side. */
.cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
	grid-column: 1; grid-row: 1;
	display: flex; align-items: center; gap: 14px;
	min-width: 0;
	font-size: var(--mc-fs-ui);
	font-weight: 600;
	line-height: 1.35;
	color: var(--mc-ink);
	text-decoration: none;
}
.cart-drawer .woocommerce-mini-cart-item > a:not(.remove):hover { text-decoration: none; color: var(--mc-blue); }

.cart-drawer .woocommerce-mini-cart-item img {
	flex: 0 0 64px;
	width: 64px; height: auto;
	border-radius: var(--mc-r-sm);
	box-shadow: var(--mc-shadow-sm);
}

.cart-drawer .woocommerce-mini-cart-item > .remove {
	grid-column: 2; grid-row: 1;
	justify-self: end;
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: var(--mc-text-faint);
	font-size: 18px; line-height: 1; text-decoration: none;
}
.cart-drawer .woocommerce-mini-cart-item > .remove:hover { background: #F2F4F7; color: var(--mc-bad); text-decoration: none; }

/* Stepper bottom left, line price bottom right. */
.cart-drawer .woocommerce-mini-cart-item > .mc-qty { grid-column: 1; grid-row: 2; justify-self: start; }

.cart-drawer .woocommerce-mini-cart-item > .mc-qty-price {
	grid-column: 2; grid-row: 2;
	justify-self: end;
	font-size: var(--mc-fs-body);
	font-weight: 700;
	color: var(--mc-ink);
}
.mc-qty-price .amount { white-space: nowrap; }

.mc-qty {
	display: inline-flex; align-items: center;
	border: 1px solid var(--mc-line); border-radius: var(--mc-r-pill);
	overflow: hidden;
}

.mc-qty-btn {
	width: 36px; height: 36px;
	background: transparent; border: 0;
	font-size: 18px; line-height: 1; color: var(--mc-ink); cursor: pointer;
}
.mc-qty-btn:hover { background: #F2F4F7; }
.mc-qty-btn:disabled { color: #C6CEDA; cursor: default; background: transparent; }

.mc-qty-val { min-width: 36px; text-align: center; font-weight: 700; font-size: var(--mc-fs-sm); }

/* WooCommerce's own subtotal line. */
.cart-drawer .woocommerce-mini-cart__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--mc-s-4);
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--mc-line);
	font-size: var(--mc-fs-body);
	color: var(--mc-text-muted);
}

.cart-drawer .woocommerce-mini-cart__total strong { font-weight: 600; }

.cart-drawer .woocommerce-mini-cart__total .amount {
	font-size: 21px; font-weight: 700; color: var(--mc-ink); white-space: nowrap;
}

.cart-discount { margin: var(--mc-s-4) 0 0; }

.cart-discount__row {
	display: flex; justify-content: space-between; gap: var(--mc-s-4);
	margin: 0; padding: var(--mc-s-2) 0;
	font-size: var(--mc-fs-sm); font-weight: 600; color: var(--mc-good);
}

.cart-discount__row--total {
	border-top: 1px solid var(--mc-line);
	margin-top: var(--mc-s-2); padding-top: var(--mc-s-3);
	font-size: 21px; font-weight: 700; color: var(--mc-ink);
}

/*
 * Discount code box: hidden.
 *
 * There are no discounts on the calendar, and at £9.95 delivered the margin
 * does not carry one. Delete this one rule to bring the box back; everything
 * below it is intact.
 *
 * Note this hides the box in the basket drawer only. WooCommerce's block
 * checkout renders its own coupon field, which is a separate thing and is
 * switched off in WooCommerce, Settings, General.
 */
.cart-coupon { display: none; }

.cart-coupon { margin: 24px 0 0; }

.cart-coupon__applied {
	display: inline-flex; align-items: center; gap: var(--mc-s-2);
	margin: 0; padding: 7px 14px; border-radius: var(--mc-r-pill);
	background: #E8F5EE; color: var(--mc-good);
	font-size: var(--mc-fs-label); font-weight: 700;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
}

.cart-coupon__form { margin: 0; }

.cart-coupon__label {
	display: block; margin-bottom: var(--mc-s-2);
	font-size: var(--mc-fs-label); font-weight: 700;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-text-faint);
}

.cart-coupon__row { display: flex; gap: var(--mc-s-2); }

.cart-coupon__row input[type="text"] {
	flex: 1 1 auto; min-width: 0;
	padding: 11px var(--mc-s-4);
	border: 1px solid var(--mc-line); border-radius: var(--mc-r-md);
	font-family: inherit; font-size: var(--mc-fs-sm); text-transform: uppercase;
	background: var(--mc-paper); color: var(--mc-ink);
}

.cart-coupon__btn {
	flex: 0 0 auto; padding: 11px var(--mc-s-5);
	border: 0; border-radius: var(--mc-r-md);
	background: var(--mc-ink); color: var(--mc-paper);
	font-family: inherit; font-size: var(--mc-fs-sm); font-weight: 700; cursor: pointer;
}
.cart-coupon__btn:hover { background: #16222E; }

.cart-coupon__msg { margin: var(--mc-s-2) 0 0; font-size: var(--mc-fs-sm); }
.cart-coupon__msg:empty { display: none; }
.cart-coupon__msg.is-ok { color: var(--mc-good); }
.cart-coupon__msg.is-bad { color: var(--mc-bad); }

.cart-shipping-note,
.cart-returns-note {
	margin: 0;
	font-size: var(--mc-fs-xs); line-height: 1.55; color: var(--mc-text-muted);
}
.cart-shipping-note { margin-top: 24px; }
.cart-returns-note { margin-top: 6px; }

.cart-drawer .woocommerce-mini-cart__buttons {
	display: flex; flex-direction: column; gap: var(--mc-s-3);
	margin: 24px 0 0;
}

.cart-drawer .woocommerce-mini-cart__buttons .button {
	display: block; width: 100%;
	padding: 15px var(--mc-s-5);
	border: 0; border-radius: var(--mc-r-pill);
	background: #EDEFF2; color: var(--mc-ink);
	font-size: var(--mc-fs-sm); font-weight: 700;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	text-align: center; text-decoration: none;
}

.cart-drawer .woocommerce-mini-cart__buttons .checkout { background: var(--mc-blue); color: var(--mc-paper); }
.cart-drawer .woocommerce-mini-cart__buttons .checkout:hover { background: var(--mc-blue-dark); }

/* The basket page is redirected away, so its button has no destination. */
.cart-drawer .woocommerce-mini-cart__buttons .wc-forward:not(.checkout) { display: none; }

.cart-continue {
	display: block; width: 100%;
	margin-top: var(--mc-s-3); padding: var(--mc-s-3);
	background: transparent; border: 0;
	font-family: inherit; font-size: var(--mc-fs-sm); font-weight: 600;
	color: var(--mc-text-muted); text-align: center; cursor: pointer;
}
.cart-continue:hover { color: var(--mc-ink); text-decoration: underline; }

.cart-drawer .woocommerce-mini-cart__empty-message,
.cart-empty-note {
	padding: var(--mc-s-7) 0 var(--mc-s-4); margin: 0;
	text-align: center; color: var(--mc-text-muted);
}

.cart-empty-buy { display: flex; justify-content: center; }