/* ============================================================
   Phone and tablet menu (27 Sep 2026): design C of the mockups at
   email-preview/mobile-menu/ ("one list, sections open as pages"),
   chosen by Ashley without the chips row at the foot of each page.
   Markup: the #m-drawer after the header in header.php, built from
   the same data as the desktop menu. Behaviour: js/nav.js.
   Below 1181px only (the breakpoint must match nav.js); at 1181px
   and up the drawer is display:none and nothing here applies.
   Kept out of style.css, which other sessions edit and deploy; the
   old accordion drawer's rules were deleted from it the same day.
   The portal's signed-out pages copy these rules through
   portal/tools/build-site-chrome.js.
   ============================================================ */
.m-drawer { display: none; }

@media (max-width: 1180px) {
	/* The wide header's menu gives way to the drawer. */
	.site-nav { display: none; }
	.nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }

	/* The drawer hangs from the header's bottom edge (nav.js measures it into
	   --as-dd-top, since the top bar above scrolls away) to the foot of the
	   screen, and overlaps the header's 1px rule so the two read as one. */
	.m-drawer {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
		top: calc(var(--as-dd-top, 157px) - 1px);
		display: flex; flex-direction: column;
		background: var(--ink); color: var(--paper);
		font-size: 16px; line-height: 1.4;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s;
	}
	.m-drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	body.m-lock { overflow: hidden; }
	body.m-lock .site-header { border-bottom-color: var(--ink); }

	/* Opened at the top of a page, the audience bar would sit above the
	   drawer and show For Business / For Home and Contact a second time
	   (design C of the 10 Oct mockups, email-preview/mobile-menu-2/). The bar
	   and header slide up together by however much of the bar is showing
	   (nav.js measures it into --as-tuck); a transform, so the page under the
	   drawer doesn't move. */
	.aud-bar { transition: transform .26s cubic-bezier(.2,.8,.2,1), background .2s ease; }
	.site-header { transition: transform .26s cubic-bezier(.2,.8,.2,1); }
	body.m-tuck .aud-bar,
	body.m-tuck .site-header { transform: translateY(calc(-1 * var(--as-tuck, 0px))); }

	.m-drawer a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
	.m-drawer a:hover { text-decoration: none; }
	.m-drawer button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
	.m-drawer ul { list-style: none; margin: 0; padding: 0; }
	.m-drawer li { margin: 0; padding: 0; }
	.m-drawer :focus-visible { outline: 2px solid var(--blush); outline-offset: 2px; border-radius: 6px; }

	/* Pressed rows. The browser's tap flash is off above, so without this
	   the full-width rows answered a touch with nothing at all (design
	   review, 9 Oct, finding 1). A tint, like an iOS list, rather than the
	   shrink press.js gives buttons and cards; the side shadows carry it past
	   the text into the page's own margin. Boxed controls (Sign in, the dock)
	   keep their own :active colours. */
	.m-big button:active, .m-big .m-act:active, .m-list a:active {
		background-color: rgba(255,255,255,.07);
		box-shadow: -16px 0 0 rgba(255,255,255,.07), 16px 0 0 rgba(255,255,255,.07);
	}
	.m-small a:active {
		background-color: rgba(255,255,255,.07);
		box-shadow: -8px 0 0 rgba(255,255,255,.07), 8px 0 0 rgba(255,255,255,.07);
	}
	.m-back:active { background-color: rgba(255,255,255,.08); }
	.m-switch a:not([aria-current]):active { background-color: rgba(255,255,255,.1); color: #fff; }

	/* Pages: the list, and one per section, laid over each other. Each
	   scrolls on its own; only the one showing is focusable (the rest are
	   inert, set by nav.js). */
	.m-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
	.m-page {
		position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch; background: var(--ink);
	}
	.m-page--root { transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s; }
	.m-page--root.is-behind { transform: translateX(-24%); visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
	.m-page--sub { transform: translateX(100%); visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
	.m-page--sub.is-on { transform: none; visibility: visible; transition-delay: 0s; }
	.m-wrap { max-width: 680px; margin: 0 auto; padding: 0 16px 24px; }

	/* The list: Design, Support, Systems as large serif rows. */
	.m-drawer .m-big { padding-top: 0; }
	.m-big button, .m-big .m-act {
		display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
		width: 100%; min-height: 78px; margin: 0; padding: 12px 0; border: 0; border-radius: 0;
		border-bottom: 1px solid rgba(255,255,255,.12); background: none; box-shadow: none;
		text-align: left; cursor: pointer; color: #fff;
	}
	.m-big b { grid-column: 1; font-family: "Lora", Georgia, serif; font-size: 27px; font-weight: 600; line-height: 1.15; }
	.m-big small { grid-column: 1; display: block; margin-top: 3px; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--stone); }
	.m-big i { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--blush); font-style: normal; }

	/* Plain links, two across. */
	.m-small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
	.m-drawer .m-small { margin-top: 10px; }
	.m-small a {
		display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.08);
		font-size: 17px; font-weight: 600; color: rgba(247,245,241,.92);
	}

	/* The For Business / For Home switch, then Sign in (blush, never stone).
	   First on the list page, above the rows it changes. */
	.m-switch-row {
		display: flex; align-items: center; gap: 10px;
		margin: 16px 0 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12);
	}
	.m-switch { flex: 1 1 auto; min-width: 0; display: flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); }
	.m-switch a {
		flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 44px;
		padding: 0 6px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; color: rgba(247,245,241,.7);
	}
	.m-switch a[aria-current] { background: var(--paper); color: var(--ink); }
	.m-drawer--home .m-switch a[aria-current] { background: var(--blush); color: var(--plum); }
	.m-signin {
		flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
		min-height: 52px; padding: 0 16px; border-radius: 10px; background: var(--blush);
		color: var(--ink) !important; font-size: 15px; font-weight: 700; white-space: nowrap;
	}
	.m-signin:hover, .m-signin:active { background: #fff; }

	/* "Something's broken?" under the list. */
}

@media (max-width: 1180px) {
	/* A section's own page: Back, heading, its line, then every card under
	   the desktop side-tab names, then the section's promo if it has one. */
	.m-back {
		display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 6px 0 0 -6px; padding: 0 10px 0 6px;
		border: 0; border-radius: 8px; background: none; box-shadow: none; cursor: pointer;
		font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--blush);
	}
	.m-drawer .m-h { margin: 6px 0 2px; font-family: "Lora", Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: #fff; }
	.m-drawer .m-h:focus:not(:focus-visible) { outline: none; }
	.m-line { margin: 0; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--stone); }
	.m-drawer .m-eyebrow {
		margin: 24px 0 4px; font-family: inherit; font-size: 12.5px; font-weight: 600; font-style: normal;
		letter-spacing: .03em; line-height: 1.3; text-transform: none; color: rgba(247,245,241,.6);
	}
	.m-list a {
		display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px;
		min-height: 76px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09);
	}
	.m-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px; background: var(--blush); }
	.m-art img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
	.m-art--photo img { object-fit: cover; }
	.m-row-body { display: block; min-width: 0; }
	.m-list strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; color: #fff; }
	.m-list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: rgba(247,245,241,.66); }
	.m-price { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.3; color: #E3B7CB; }
	.m-promo {
		display: block; margin-top: 20px; padding: 14px 16px; border-radius: 12px;
		background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); border-left: 3px solid var(--blush);
	}
	.m-promo b { display: block; font-family: "Lora", Georgia, serif; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: #fff; }
	.m-promo > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: rgba(247,245,241,.7); }
	.m-promo em { display: block; margin-top: 8px; font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--blush); }

	/* For Home: the page's two actions are the big rows, with art and price. */
	.m-big .m-act { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 14px; min-height: 92px; }
	.m-big .m-act .m-art { grid-column: 1; grid-row: 1 / span 3; border-radius: 10px; }
	.m-big .m-act b { grid-column: 2; grid-row: 1; font-size: 22px; }
	.m-big .m-act small { grid-column: 2; grid-row: 2; font-size: 14px; }
	.m-big .m-act .m-price { grid-column: 2; grid-row: 3; }
	.m-big .m-act i { grid-column: 3; grid-row: 1 / span 3; }
	.m-list--care a { border-bottom: 0; }

	/* Dock: the red "I need help now" (business) and the phone number,
	   always in reach at the foot of the screen. */
	.m-dock {
		flex: none; display: flex; gap: 8px; padding: 10px max(16px, calc((100% - 648px) / 2)) calc(10px + env(safe-area-inset-bottom));
		background: #15181B; border-top: 1px solid rgba(255,255,255,.10);
	}
	.m-help, .m-call {
		display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 14px;
		border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
	}
	.m-help { flex: 1 1 auto; background: #B02A1F; color: #fff !important; font-size: 16px; }
	.m-help:hover, .m-help:active { background: #8E2118; }
	.m-call { flex: none; border: 1.5px solid rgba(255,255,255,.55); color: #fff !important; }
	.m-call:hover, .m-call:active { background: rgba(255,255,255,.08); }
	.m-call svg { flex: none; }
	.m-call--wide { flex: 1 1 auto; }
}

/* For Home top strip, at every width: blush rather than plum, so two dark
   bands no longer stack over the page (plum on blush 8.1:1, white on plum 11.8:1). */
.aud-bar--home { background: var(--blush); border-bottom-color: rgba(92,36,65,.14); }
.aud-bar--home .aud-switch { background: rgba(92,36,65,.10); }
.aud-bar--home .aud-switch a:not(.on) { color: var(--plum); }
.aud-bar--home .aud-switch a:not(.on):hover { color: var(--ink); }
.aud-bar--home .aud-switch a.on, .aud-bar--home .aud-switch a.on:hover { background: var(--plum); color: #fff; }
.aud-bar--home .aud-tel { background: #fff; color: var(--ink); }
.aud-bar--home .aud-remote { border-color: rgba(92,36,65,.4); color: var(--plum); }
.aud-bar--home .aud-remote:hover, .aud-bar--home .aud-remote:focus-visible { background: rgba(92,36,65,.08); border-color: var(--plum); color: var(--plum); }

/* The narrowest phones: the dock's two buttons and the switch row fit
   side by side at 360px. */
@media (max-width: 389px) {
	.m-help, .m-call { padding: 0 10px; font-size: 14.5px; gap: 6px; }
	.m-switch a { font-size: 14px; }
	.m-signin { padding: 0 12px; font-size: 14.5px; }
}

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
	.m-drawer, .m-page, .m-page--root, .m-page--root.is-behind, .m-page--sub, .m-page--sub.is-on, .nav-toggle-bar, .aud-bar, .site-header { transition: none; }
}