/* ============================================================================
   TOCS — full-screen "paged" homepage (staging trial)
   Scope: everything is prefixed with body.home so no other page is affected.
   Tailwind's app.css is compiled at build time, so the layout values this file
   needs live here as plain CSS (see functions.php note on the same subject).
   Loaded after app.css.
   ========================================================================== */

body.home .hp-scroller {
	height: 100vh;
	height: 100svh;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-y: contain;
}

body.home,
body.home .hp-scroller { scrollbar-width: none; }

body.home .hp-scroller::-webkit-scrollbar { display: none; }

/* The theme wraps header + content + footer in #page (flex column, min-h-screen).
   The paged layout takes the scroller out of that flow, so neutralise it and pin
   the theme's own header and footer to the viewport instead of rebuilding them. */
body.home #page { display: block; min-height: 0; }

body.home #page > header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 40;
	background: #cececd;
}

body.home #page > footer {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 35;
	background: #cececd;
}

body.home #page > footer .page-container,
body.home #page > header .page-container { width: 100%; }

/* the rotated OWNER'S PORTAL tab would collide with the dot rail */
body.home #side-btn { bottom: 190px; }

body.home #content.site-content { flex-grow: 0; }

.hp-panel {
	min-height: 100vh;
	min-height: 100svh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* --hd is set by js/home-paged.js from the real header height. Short-viewport
	   tiers below only trim the BOTTOM padding: reducing the top padding past the
	   header's own height is what put a line of the heading under the header. */
	padding: calc(var(--hd, 96px) + 16px) 0 106px;
	position: relative;
}

.hp-inner { width: 100%; }

@media (max-width: 900px) {
	.hp-panel { padding: calc(var(--hd, 88px) + 12px) 0 104px; }
}

/* ---- entrance animation ------------------------------------------------- */
.hp-anim {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.22, .8, .24, 1), transform .7s cubic-bezier(.22, .8, .24, 1);
}

.hp-panel.is-active .hp-anim { opacity: 1; transform: none; }
.hp-panel.is-active .hp-anim:nth-child(1) { transition-delay: .05s; }
.hp-panel.is-active .hp-anim:nth-child(2) { transition-delay: .12s; }
.hp-panel.is-active .hp-anim:nth-child(3) { transition-delay: .19s; }
.hp-panel.is-active .hp-anim:nth-child(4) { transition-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
	body.home .hp-scroller { scroll-behavior: auto; }
	.hp-anim { opacity: 1; transform: none; transition: none; }
}

/* ---- dot rail (hover peeks the panel label) ----------------------------- */
.hp-dots {
	position: fixed;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 45;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end;
}

/* Hidden until hover, and absolutely positioned so the label never widens the
   rail: the theme's page-container runs to 48px from the edge, so a rail with
   layout width would sit on top of the last card and steal its clicks. */
.hp-dot {
	position: relative;
	display: block;
	background: none;
	border: 0;
	padding: 3px 0;
	cursor: pointer;
	color: #0b0b0b;
}

.hp-dot span {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	opacity: 0;
	pointer-events: none;
	transition: .25s;
	white-space: nowrap;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
}

.hp-dot i { display: block; width: 16px; height: 1px; background: rgba(20, 20, 20, .38); transition: .25s; }
.hp-dot:hover span, .hp-dot:focus-visible span { opacity: 1; transform: translateY(-50%); }
/* No always-on label: it would be absolutely positioned to the left of the rail
   and land on top of the last card. The active panel is marked by the longer,
   darker line instead. */
.hp-dot:hover i, .hp-dot.is-on i { width: 24px; background: #0b0b0b; }

@media (max-width: 1100px) { .hp-dots { display: none; } }

/* ---- shared type ------------------------------------------------------- */
.hp-h1 {
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	max-width: 330px;
}

.hp-lead { font-size: 23px; line-height: 1.32; font-weight: 500; max-width: 74ch; }
.hp-lead p { margin: 0; }

.hp-micro {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #4b5563;
	font-weight: 600;
}

.hp-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
/* The section labels are real <h2>s so the page's heading tree is H1 > H2 > H3; reset the base h2
   styling so they keep the eyebrow's look and the panel spacing does not move. */
h2.hp-eyebrow { margin: 0; padding: 0; line-height: 1.2; color: inherit; }

.hp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 22px;
	border: 1px solid #141414;
	border-radius: 0 15px 0 0;
	font-size: 11px;
	letter-spacing: .2em;
	font-weight: 700;
	text-transform: uppercase;
	transition: .2s;
	color: #0b0b0b;
	background: transparent;
}

.hp-cta:hover { background: #0b0b0b; color: #fff; }
.hp-cta-row { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

.hp-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid #141414;
	padding-top: 12px;
	margin-bottom: 26px;
}

.hp-head .hp-n { font-size: 11px; letter-spacing: .2em; font-weight: 700; }

/* ---- panel 1 ----------------------------------------------------------- */
.hp-hero { display: grid; grid-template-columns: 44% 1fr; gap: 46px; align-items: start; }

/* Production renders this image at h-[50vh] aspect-video object-cover. Kept, but
   clamped so the panel still equals one screen on a short laptop viewport. */
.hp-hero-img {
	margin-top: 40px;
	border-radius: 0 40px 0 0;
	overflow: hidden;
	height: clamp(160px, calc(100svh - 430px), 50vh);
}

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

/* Stack the hero earlier than the phone breakpoint: below ~1200px the heading
   column is too narrow to set "Melbourne Owners Corporation Management" on one
   line at a size larger than the line above it. */
@media (max-width: 1200px) {
	.hp-hero { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 820px) {
	.hp-lead { font-size: 19px; }
}

/* ---- card grids -------------------------------------------------------- */
.hp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .hp-grid3 { grid-template-columns: 1fr 1fr; } }

.hp-card {
	border: 1px solid #141414;
	border-radius: 0 40px 0 0;
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	min-height: 224px;
	transition: .22s;
	background: transparent;
}

.hp-card:hover { background: #f3f0ef; transform: translateY(-3px); }
.hp-card h3 { font-size: 19px; line-height: 1.2; font-weight: 600; margin: 30px 0 12px; max-width: 15ch; }
.hp-card p { font-size: 13.5px; line-height: 1.55; color: #1d1d1d; max-width: 34ch; margin: 0; }

.hp-arrow {
	margin-top: auto;
	padding-top: 16px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	opacity: .5;
	transition: .2s;
}

.hp-card:hover .hp-arrow { opacity: 1; }

/* Phone: three stacked cards are taller than one screen, which would break the
   one-panel-per-screen promise. Compress them into compact rows instead - and
   keep this block AFTER the base rules above, since a media query adds no
   specificity and the later declaration would otherwise win. */
@media (max-width: 680px) {
	.hp-grid3 { grid-template-columns: 1fr; gap: 10px; }
	.hp-card { min-height: 0; padding: 15px 18px 16px; border-radius: 0 24px 0 0; }
	.hp-card h3 { font-size: 16px; margin: 8px 0 5px; max-width: none; }
	.hp-card p { font-size: 12.5px; max-width: none; }
	.hp-card .hp-arrow { padding-top: 9px; font-size: 10px; }
}

/* ---- definition band --------------------------------------------------- */
.hp-band {
	background: #0b0b0b;
	color: #fff;
	border-radius: 0 40px 0 0;
	padding: 56px;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 40px;
	align-items: center;
}

.hp-band .hp-micro { color: #a9a9a9; }
.hp-band p { font-size: 33px; line-height: 1.26; font-weight: 500; max-width: 19ch; margin: 18px 0 0; letter-spacing: -.01em; }

.hp-band .hp-src { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #bdbdbd; }
.hp-band .hp-src div { margin-top: 14px; }
.hp-band .hp-loc { color: #fff; font-weight: 600; text-transform: none; letter-spacing: .02em; font-size: 13px; }

@media (max-width: 880px) {
	.hp-band { grid-template-columns: 1fr; padding: 34px 22px; }
	.hp-band p { font-size: 23px; }
}

/* ---- steps ------------------------------------------------------------- */
.hp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .hp-steps { grid-template-columns: 1fr 1fr; } }

.hp-step { border-top: 1px solid #141414; padding-top: 14px; transition: .2s; }
.hp-step:hover { padding-top: 22px; }
.hp-step .hp-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.hp-step h3 { font-size: 15px; font-weight: 600; margin: 12px 0 8px; }
.hp-step p { font-size: 13px; line-height: 1.5; color: #222; max-width: 28ch; margin: 0; }

.hp-loc-line {
	margin-top: 34px;
	border-top: 1px solid #141414;
	padding-top: 16px;
	font-size: 13px;
	color: #1c1c1c;
}

/* ---- faq --------------------------------------------------------------- */
.hp-faq { border-top: 1px solid #141414; }
.hp-faq details { border-bottom: 1px solid #141414; }

.hp-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 18px 0;
	font-size: 17px;
	font-weight: 600;
	color: #0b0b0b;
}

.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary .hp-pl { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.hp-faq summary .hp-pl::before,
.hp-faq summary .hp-pl::after { content: ""; position: absolute; background: #0b0b0b; left: 50%; top: 50%; }
.hp-faq summary .hp-pl::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.hp-faq summary .hp-pl::after { width: 1px; height: 14px; transform: translate(-50%, -50%); transition: .2s; }
.hp-faq details[open] summary .hp-pl::after { height: 0; }
.hp-faq .hp-ans { font-size: 14px; line-height: 1.6; max-width: 84ch; padding: 0 0 20px; color: #1a1a1a; }

/* ---- contact ----------------------------------------------------------- */
.hp-contact {
	border: 1px solid #141414;
	border-radius: 0 40px 0 0;
	padding: 44px;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 40px;
	align-items: end;
}

@media (max-width: 880px) { .hp-contact { grid-template-columns: 1fr; padding: 28px 22px; } }

.hp-contact h2 { font-size: 32px; line-height: 1.14; font-weight: 600; letter-spacing: -.01em; max-width: 16ch; }
.hp-contact .hp-nap { margin-top: 20px; font-size: 15px; line-height: 1.85; color: #0b0b0b; }
.hp-contact .hp-nap a { text-decoration: none; }
.hp-contact .hp-act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }


/* ==========================================================================
   Revision 2 — two-line H1, a visual on every panel, linked cards
   ======================================================================== */

/* ---- panel 1: heading on two lines, second line larger ---------------- */
.hp-h1 { display: flex; flex-direction: column; gap: 12px; max-width: none; }
.hp-h1-l1 { font-size: clamp(15px, 1.2vw + 2px, 19px); line-height: 1.25; letter-spacing: .12em; }
/* 20px / .02em is the largest size at which "Melbourne Owners Corporation
   Management" still sets on a single line inside the 44% heading column. */
.hp-h1-l2 { font-size: clamp(15px, 1.2vw + 2px, 19px); line-height: 1.2; letter-spacing: .02em; }
.hp-lead { font-size: 20px; }

@media (max-width: 820px) {
	.hp-h1 { gap: 8px; }
	.hp-h1-l1 { font-size: 13px; }
	.hp-h1-l2 { font-size: 19px; }
	.hp-lead { font-size: 17px; }
}

/* ---- cards are links now --------------------------------------------- */
a.hp-card { color: inherit; text-decoration: none; cursor: pointer; }
a.hp-card:focus-visible { outline: 2px solid #0b0b0b; outline-offset: 3px; }

/* ---- photo strip (panel 2) ------------------------------------------- */
.hp-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.hp-photo { position: relative; display: block; height: 148px; border-radius: 0 40px 0 0; overflow: hidden; color: #fff; }
.hp-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hp-photo:hover img { transform: scale(1.04); }

/* ---- flow diagram (panels 2-5) --------------------------------------- */
.hp-diagram { margin-top: 20px; border: 1px solid #141414; border-radius: 0 40px 0 0; padding: 16px 22px 10px; }
.hp-diagram .cap { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #4b5563; font-weight: 600; }
.hp-diagram svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.hp-diagram svg text { font-family: inherit; font-size: 13px; font-weight: 600; fill: #0b0b0b; }
.hp-diagram svg text.sm { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: #4b5563; font-weight: 700; }
.hp-diagram svg .ln { stroke: #141414; stroke-width: 1; fill: none; }
.hp-diagram svg .ln-dash { stroke: #141414; stroke-width: 1; fill: none; stroke-dasharray: 3 4; opacity: .55; }

/* the relationship diagram sits inside the black band, so invert it */
.hp-band .hp-diagram { border-color: rgba(255, 255, 255, .35); margin-top: 20px; padding: 14px 18px 8px; }
.hp-band .hp-diagram svg text { fill: #fff; }
.hp-band .hp-diagram svg text.sm { fill: #bdbdbd; }
.hp-band .hp-diagram svg .ln { stroke: rgba(255, 255, 255, .8); }
.hp-band .hp-diagram svg .ln-dash { stroke: rgba(255, 255, 255, .5); }

/* ---- step connectors (panel 5) --------------------------------------- */
.hp-step { position: relative; }
@media (min-width: 981px) {
	.hp-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -15px; top: 8px;
		font-size: 14px; opacity: .5; }
}

/* ---- FAQ + aside (panel 6) ------------------------------------------- */
.hp-faq-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start; }
.hp-aside { border: 1px solid #141414; border-radius: 0 40px 0 0; overflow: hidden; }
.hp-aside img { width: 100%; height: 186px; object-fit: cover; }
.hp-aside .hp-in { padding: 18px 22px 22px; }
.hp-aside p { font-size: 13px; line-height: 1.55; margin: 8px 0 16px; }
.hp-aside .hp-go { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
	border-bottom: 1px solid #0b0b0b; padding-bottom: 2px; }

/* ---- contact panel: form box + service-area map ---------------------- */
.hp-p7-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; }
.hp-map { border: 1px solid #141414; border-radius: 0 40px 0 0; padding: 20px 22px; display: flex;
	flex-direction: column; justify-content: space-between; gap: 10px; }
.hp-map svg { width: 100%; height: auto; }
.hp-map svg text { font-family: inherit; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	font-weight: 700; fill: #0b0b0b; }
.hp-map svg .ln { stroke: #141414; stroke-width: 1; fill: none; }
.hp-map svg .ring { stroke: #141414; stroke-width: 1; fill: none; opacity: .35; stroke-dasharray: 3 5; }
.hp-map svg .dot { fill: #0b0b0b; }
.hp-map .cap { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #4b5563; font-weight: 600; }

/* keep the one-panel-per-screen promise on small screens: the visuals are
   the first thing to go, not the copy */
@media (max-width: 1000px) {
	.hp-faq-wrap { grid-template-columns: 1fr; }
	.hp-aside { display: none; }
	.hp-p7-grid { grid-template-columns: 1fr; }
	.hp-map { display: none; }
}
@media (max-width: 900px) {
	.hp-strip, .hp-diagram { display: none; }
}

/* Stacked hero (<=1200px): the heading owns the full width, so the second line
   can hold the full 19px and still set on one line. Declared last on purpose —
   a media query adds no specificity, so it has to come after the base rule. */
@media (max-width: 1200px) {
	.hp-h1-l1, .hp-h1-l2 { font-size: 19px; }
}

@media (max-width: 820px) {
	.hp-h1-l1, .hp-h1-l2 { font-size: 17px; }
}

/* Phone: the hero stacks, so the production 50vh image would push the panel past
   one screen. Shrink it here rather than losing the copy. Declared last for the
   same reason as the rules above — a media query adds no specificity. */
@media (max-width: 820px) {
	.hp-hero-img { height: clamp(170px, 24vh, 230px); margin-top: 24px; }
}

/* The hero panel starts at the top, the way production runs: header, copy, image,
   then air. Centring it on a tall screen left a dead band under the header. */
body.home #hp-p1 { justify-content: flex-start; }

/* Staging build marker: the page has been revised several times and a stale tab
   looks identical to a broken change. Remove before any production push. */
body.home .hp-build {
	position: fixed;
	left: 18px;
	bottom: 12px;
	z-index: 58;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: #0b0b0b;
	background: #fff;
	border: 1px solid #141414;
	border-radius: 0 12px 0 0;
	padding: 5px 10px;
	opacity: .85;
}
body.home .hp-build:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Short desktop viewports. If panel 1 is taller than the window the snap area
   is bigger than the viewport, the page can come to rest with the heading
   scrolled off the top — which reads as "the first page has no text".
   These tiers keep panel 1 inside the window down to ~520px, and hide the
   photo below that (the copy matters more than the picture).
   -------------------------------------------------------------------------- */
@media (min-width: 821px) and (max-height: 780px) {
	.hp-panel { padding-bottom: 80px; }
	.hp-lead { font-size: 18px; }
	.hp-hero-img { height: clamp(160px, calc(100svh - 430px), 50vh); }
	.hp-card { min-height: 180px; }
	.hp-photo { height: 112px; }
	.hp-strip { margin-top: 12px; }
	.hp-diagram { margin-top: 10px; padding: 10px 16px 4px; }
	.hp-card h3 { margin: 20px 0 10px; }
	.hp-band { padding: 40px 44px; }
	.hp-faq summary { padding: 14px 0; }
	.hp-faq .hp-ans { font-size: 13px; }
	.hp-contact { padding: 32px; }
}

@media (min-width: 821px) and (max-height: 580px) {
	.hp-panel { padding-bottom: 72px; }
	.hp-lead { font-size: 17px; }
	.hp-hero-img { height: clamp(150px, calc(100svh - 400px), 44vh); }
	.hp-card { min-height: 178px; }
	.hp-diagram, .hp-strip, .hp-aside { display: none; }
	.hp-contact { padding: 18px 22px; }
	.hp-contact h2 { font-size: 22px; }
	.hp-contact .hp-nap { font-size: 13px; line-height: 1.7; }
	.hp-contact .hp-cta { height: 38px; }
	.hp-faq summary { padding: 11px 0; font-size: 15px; }
	.hp-faq .hp-ans { font-size: 12.5px; }
	.hp-band { padding: 30px 32px; }
	.hp-band p { font-size: 24px; }
}

@media (min-width: 821px) and (max-height: 520px) {
	.hp-hero-img { display: none; }
}

/* Below ~660px tall the cycle/handover diagrams are the first thing to go:
   they are explainers, not the message. */
@media (min-width: 821px) and (max-height: 660px) {
	.hp-diagram, .hp-map, .hp-strip { display: none; }
}

/* --------------------------------------------------------------------------
   Phones: the visuals are wanted here too. Shown in compact form rather than
   hidden, with the panel furniture trimmed so each screen still fits. The dark
   band trades its keyword list for the relationship diagram (the keywords stay
   in the HTML, so answer engines still read them).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.hp-panel { padding-bottom: 96px; }
	.hp-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
	.hp-photo { height: 74px; border-radius: 0 22px 0 0; }
	.hp-grid3 { gap: 8px; }
	.hp-diagram { display: block; margin-top: 12px; padding: 10px 14px 4px; border-radius: 0 22px 0 0; }
	.hp-diagram .cap { font-size: 10px; }
	.hp-diagram svg { margin-top: 6px; }
	.hp-band { padding: 24px 18px 22px; border-radius: 0 22px 0 0; }
	.hp-band p { font-size: 21px; }
	.hp-band .hp-keys { display: none; }
	.hp-band .hp-diagram { margin-top: 4px; padding: 8px 12px 2px; }
	.hp-map { display: flex; padding: 14px 16px; border-radius: 0 22px 0 0; }
	.hp-map svg { max-width: 180px; }
	.hp-contact { border-radius: 0 22px 0 0; }
}

/* Short phones (a 740px-tall Android, an iPhone SE): the visuals now add real
   height, so trim the furniture further rather than hide what was just added. */
@media (max-width: 900px) and (max-height: 800px) {
	.hp-card { padding: 13px 15px 14px; }
	.hp-card h3 { font-size: 15px; margin: 7px 0 4px; }
	.hp-card p { font-size: 12px; line-height: 1.45; }
	.hp-card .hp-arrow { padding-top: 7px; }
	.hp-grid3 { gap: 8px; }
	.hp-photo { height: 62px; }
	.hp-card { padding: 11px 13px 12px; }
	.hp-card p { font-size: 11.5px; line-height: 1.4; }
	.hp-grid3 { gap: 6px; }
	.hp-diagram { padding: 8px 12px 2px; margin-top: 10px; }
	.hp-band { padding: 20px 16px 18px; }
	.hp-band p { font-size: 19px; }
	.hp-steps .hp-step p { font-size: 12px; }
	.hp-faq summary { padding: 13px 0; font-size: 15px; }
	.hp-faq .hp-ans { font-size: 12.5px; padding-bottom: 14px; }
	.hp-contact { padding: 20px 18px; }
	.hp-contact h2 { font-size: 24px; }
	.hp-contact .hp-nap { font-size: 13px; line-height: 1.7; }
	.hp-loc-line { margin-top: 20px; padding-top: 12px; font-size: 12px; }
	.hp-map svg { max-width: 150px; }
}

/* On a phone the wide flow diagram renders at about a third scale and its labels
   become unreadable. Below 900px the same three steps are rendered as a text
   list instead: same content, actually legible, and shorter. */
.hp-flow-m { display: none; list-style: none; margin: 6px 0 0; padding: 0; }
.hp-flow-m li { border-top: 1px solid #141414; padding: 6px 0 6px 20px; position: relative;
	display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.hp-flow-m li:first-child { border-top: 0; }
.hp-flow-m li b { font-size: 13px; font-weight: 600; }
.hp-flow-m li span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #4b5563; font-weight: 600; }
.hp-flow-m li::before { content: "\2192"; position: absolute; left: 0; top: 8px; font-size: 13px; opacity: .6; }

@media (max-width: 900px) {
	.hp-diagram svg { display: none; }
	.hp-flow-m { display: block; }
	.hp-band .hp-flow-m li { border-color: rgba(255, 255, 255, .35); }
	.hp-band .hp-flow-m li b { color: #fff; font-size: 12.5px; }
	.hp-band .hp-flow-m li span { color: #bdbdbd; }
	.hp-map svg { max-width: 250px; }
}

/* Phones: panel 5 already shows the four numbered steps, so the handover diagram
   would say the same thing twice. Keep the steps there, and keep the diagrams on
   the panels that would otherwise have no visual at all. */
@media (max-width: 900px) {
	#hp-p5 .hp-diagram { display: none; }
	.hp-card p { font-size: 11.5px; line-height: 1.45; }
}

/* Last panel: the service-area drawing (the interactive Google map lives on
   /contact/, where dragging it does not fight the deck's scroll snapping). */
.hp-map .hp-micro a { border-bottom: 1px solid #0b0b0b; }

}

/* The service-area sentence: it belongs with the drawing it describes, not as a
   footnote under panel 05. Normal sentence case — a 26-word line in the micro
   caps style would read as a wall. */
.hp-map .hp-area { font-size: 12px; line-height: 1.5; color: #1b1b1b; margin: 10px 0 8px; max-width: 46ch; }

@media (max-width: 900px) {
	.hp-map .hp-area { font-size: 11.5px; margin: 8px 0 6px; }
}

@media (max-width: 900px) {
	.hp-map { padding: 16px 16px 18px; }
	.hp-map svg { max-width: 205px; margin: 0 auto; }
	.hp-map .hp-area { font-size: 11px; line-height: 1.45; margin: 6px 0 6px; }
	.hp-map .hp-micro { font-size: 10px; }
}

/* The last panel now carries the service-area sentence, so the contact box gives
   back the difference: this is the CTA screen, and its buttons must stay above
   the fold on a 390x844 phone. */
@media (max-width: 900px) {
	.hp-contact { padding: 20px 18px; }
	.hp-contact h2 { font-size: 26px; }
	.hp-contact .hp-nap { font-size: 13.5px; line-height: 1.7; margin-top: 14px; }
	.hp-contact .hp-cta { height: 40px; }
	.hp-map svg { max-width: 196px; }
}

/* Last phone-tier trim: panel 02 was still 38px over with the text flow under
   three cards. Same content, tighter type — nothing removed. */
@media (max-width: 900px) {
	.hp-card { padding: 12px 14px 13px; }
	.hp-card h3 { font-size: 15px; margin: 6px 0 3px; }
	.hp-grid3 { gap: 7px; }
	.hp-diagram { padding: 8px 12px 2px; margin-top: 8px; }
	.hp-flow-m li { padding: 4px 0 4px 18px; }
	.hp-flow-m li b { font-size: 12.5px; }
}