/*
 * Hansen Theme — supplementary CSS
 *
 * Editorial Consultant style. theme.json handles color/typography/spacing tokens.
 * This file only expresses what theme.json cannot:
 *   - Grids for trust/service/case cards
 *   - Hairline dividers between editorial sections
 *   - Serif drop-cap-style step numbers on the process pattern
 *   - <details> chevron for FAQ
 *   - Author card with portrait
 *   - Minimum 44px tap target (Spec §9 mobile UI)
 *   - Comfortable measure on article body
 */

/* ------------------------------------------------------------
 * Global — smoother text rendering for the serif display
 * ---------------------------------------------------------- */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
 * §9 Mobile UI — buttons ≥ 44px, understated Editorial style
 * ---------------------------------------------------------- */
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Ghost button variant used in hero (ink outline, no fill). */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------
 * Hero — headline can breathe past the reading column
 * ---------------------------------------------------------- */
.hansen-hero__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
}

.hansen-hero__signature {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------
 * Section eyebrow (small caps label above each home section)
 * ---------------------------------------------------------- */
.hansen-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.5rem 0;
}

/* ------------------------------------------------------------
 * Hairline rule between homepage sections
 * ---------------------------------------------------------- */
.hansen-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	margin: 0;
}

/* ------------------------------------------------------------
 * Trust — three-up minimal grid, no boxes
 * ---------------------------------------------------------- */
.hansen-trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2.5rem 3rem;
}
.hansen-trust-item {
	padding: 0;
	background: transparent;
	border: 0;
}
.hansen-trust-item__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
	margin-bottom: 0.5rem;
}
.hansen-trust-item__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.5rem 0;
}
.hansen-trust-item__desc {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

/* ------------------------------------------------------------
 * Services — hairline cards, hover reveals moss underline
 * ---------------------------------------------------------- */
.hansen-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.hansen-service-card {
	padding: 2rem 1.5rem;
	background: transparent;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	border-right: 1px solid var(--wp--preset--color--rule);
	transition: background-color 0.2s ease;
}
.hansen-service-card:hover {
	background: var(--wp--preset--color--paper-warm);
}
.hansen-service-card__index {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 0.875rem;
	color: var(--wp--preset--color--moss);
	margin-bottom: 0.75rem;
}
.hansen-service-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.75rem 0;
}
.hansen-service-card__desc {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin: 0 0 1rem 0;
}
.hansen-service-card__link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding-bottom: 2px;
}
.hansen-service-card__link:hover {
	color: var(--wp--preset--color--moss-deep);
	border-bottom-color: var(--wp--preset--color--moss-deep);
}
/* Remove trailing right border on the last column (visual polish). */
@media (min-width: 900px) {
	.hansen-service-grid { grid-template-columns: repeat(2, 1fr); }
	.hansen-service-card:nth-child(2n) { border-right: 0; }
}

/* ------------------------------------------------------------
 * Process — editorial timeline built from wp:columns (no wp:html).
 * Each step is a two-column row: large italic numeral + copy.
 * ---------------------------------------------------------- */
.hansen-process .wp-block-columns {
	margin: 0;
}
.hansen-process .hansen-step__num {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 3.5vw, 3rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--moss);
}
.hansen-process .hansen-step__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
	text-transform: none;
	margin: 0 0 0.375rem 0;
}

/* ------------------------------------------------------------
 * Case study — asymmetric editorial layout
 * ---------------------------------------------------------- */
.hansen-case-card {
	padding: 0;
	background: transparent;
	border-radius: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 2rem;
}
.hansen-case-card__industry {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
	margin-bottom: 0.75rem;
}
.hansen-case-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.75rem 0;
}
.hansen-case-card__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 1rem 0;
}

/* ------------------------------------------------------------
 * CTA — full-bleed ink band, generous vertical rhythm
 * ---------------------------------------------------------- */
.hansen-cta {
	padding: 5rem 1.5rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-radius: 0;
	text-align: center;
}
.hansen-cta h2,
.hansen-cta h3 {
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	margin: 0 0 1rem 0;
}
.hansen-cta p {
	color: rgba(251, 250, 247, 0.7);
	max-width: 40rem;
	margin: 0 auto 2rem auto;
	font-size: 1.0625rem;
	line-height: 1.65;
}
.hansen-cta .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: 0;
}
.hansen-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------
 * FAQ — <details> without list marker, +/– indicator
 * ---------------------------------------------------------- */
.hansen-faq details {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 1.25rem 0;
}
.hansen-faq details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--rule);
}
.hansen-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	list-style: none;
	position: relative;
	padding-right: 2rem;
	line-height: 1.4;
}
.hansen-faq summary::-webkit-details-marker { display: none; }
.hansen-faq summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--moss);
	line-height: 1;
}
.hansen-faq details[open] summary::after { content: "–"; }
.hansen-faq details p {
	margin-top: 1rem;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.7;
}

/* ------------------------------------------------------------
 * Author card — portrait + name + role + one-liner
 * ---------------------------------------------------------- */
.hansen-author-card {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 1.25rem;
	align-items: center;
	padding: 1.5rem 0;
	background: transparent;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}
.hansen-author-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	flex: 0 0 auto;
	overflow: hidden;
}
.hansen-author-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hansen-author-card__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.25rem 0;
}
.hansen-author-card__role {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 0 0 0.375rem 0;
}
.hansen-author-card__bio {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

/* ------------------------------------------------------------
 * Updated date — small caps, muted
 * ---------------------------------------------------------- */
.hansen-updated-date {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Breadcrumb — inline, muted, small caps */
.hansen-breadcrumb {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.hansen-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.hansen-breadcrumb a:hover {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ink);
}
.hansen-breadcrumb__sep {
	margin: 0 0.5em;
	color: var(--wp--preset--color--rule);
}

/* ------------------------------------------------------------
 * TOC — sidebar-ish inline block, editorial feel
 * ---------------------------------------------------------- */
.hansen-toc {
	border-left: 1px solid var(--wp--preset--color--rule);
	padding: 0.25rem 0 0.25rem 1.25rem;
	margin: 2rem 0;
}
.hansen-toc__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.75rem;
}
.hansen-toc ol,
.hansen-toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hansen-toc li {
	margin: 0.375rem 0;
	line-height: 1.4;
}
.hansen-toc a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 0.9375rem;
	border-bottom: 1px solid transparent;
}
.hansen-toc a:hover {
	border-bottom-color: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--moss-deep);
}

/* ------------------------------------------------------------
 * Reading measure — 680px content column already set in theme.json;
 * this caps individual runs of prose regardless of block wrapper.
 * ---------------------------------------------------------- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: 42rem;
}

/* Drop cap for lead paragraph inside articles (opt-in via class). */
.entry-content .has-drop-cap:first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-style: normal;
	font-weight: 500;
	font-size: 4.5rem;
	line-height: 0.85;
	float: left;
	margin: 0.3rem 0.5rem 0 0;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------
 * Header — thin ink line under nav (Editorial masthead feel)
 * ---------------------------------------------------------- */
.wp-block-template-part.site-header,
.hansen-masthead {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper);
}
/* Two-line brand block: title on top, tagline as a kicker underneath. */
.hansen-masthead__brand {
	line-height: 1;
}
.wp-block-site-title a {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;         /* keep "Hansen Wu" on one line */
}
.hansen-masthead__tagline,
.hansen-masthead .wp-block-site-tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
/* Vertically center the navigation against the two-line brand block. */
.hansen-masthead .wp-block-group.alignwide {
	row-gap: 0.5rem;
	align-items: center;
}
.hansen-masthead .wp-block-navigation {
	flex-wrap: wrap;
	row-gap: 0.35rem;
	column-gap: 1.25rem;
}
.hansen-masthead .wp-block-navigation__container {
	flex-wrap: wrap;
	row-gap: 0.35rem;
}
@media (max-width: 600px) {
	.hansen-masthead__tagline,
	.hansen-masthead .wp-block-site-tagline {
		font-size: 0.68rem;
		letter-spacing: 0.12em;
	}
}

/* Footer */
.wp-block-template-part.site-footer,
.hansen-footer {
	border-top: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}
.hansen-footer .wp-block-navigation {
	flex-wrap: wrap;
	row-gap: 0.35rem;
	column-gap: 1.25rem;
	max-width: 100%;
}
.hansen-footer .wp-block-navigation__container {
	flex-wrap: wrap;
	row-gap: 0.35rem;
	justify-content: flex-end;
}

/* Footer sitemap columns — unstyled lists, ink links, muted hover */
.hansen-footer .hansen-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hansen-footer .hansen-footer-list li {
	list-style: none;
	margin: 0;
}
.hansen-footer .hansen-footer-list a,
.hansen-footer .hansen-eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}
.hansen-footer .hansen-footer-list a:hover,
.hansen-footer .hansen-eyebrow a:hover {
	border-bottom-color: var(--wp--preset--color--rule);
}
.hansen-footer .hansen-eyebrow {
	color: var(--wp--preset--color--muted);
}
.hansen-footer .hansen-eyebrow a {
	color: var(--wp--preset--color--muted);
}

/* Utility — colophon caption */
.hansen-caption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ============================================================
 * NARROW-VIEWPORT MENU — floating action button + sheet dialog
 * (Spec §9). Any viewport ≤ 900px hides the inline header nav
 * and shows a circular FAB fixed to the bottom-right that opens
 * a sheet dialog with the primary destinations. This covers
 * phones AND any desktop window the user has narrowed.
 *
 * WordPress core's own responsive navigation overlay is disabled
 * globally below so it can never conflict with our FAB.
 * ============================================================ */

/* Kill WP core's built-in navigation overlay everywhere. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container {
	display: none !important;
}

.hansen-menu-hint,
.hansen-menu-sheet {
	display: none;
}

@media (max-width: 900px) {
	/* Hide the inline header nav — FAB replaces it. */
	.hansen-masthead .wp-block-navigation {
		display: none !important;
	}

	/* --- Floating hamburger button (FAB, bottom-right) --------
	 * Distance from viewport edge is generous so the button never
	 * touches the iOS Safari bottom toolbar or the desktop scrollbar. */
	.hansen-menu-hint--fab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: calc(1.25rem + env(safe-area-inset-right, 0px));
		/* Extra 3rem so the button clears iOS Safari's bottom URL bar */
		bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
		z-index: 1001;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--wp--preset--color--ink);
		border: 0;
		color: var(--wp--preset--color--paper);
		cursor: pointer;
		padding: 0;
		box-shadow: 0 6px 18px rgba(11,31,51,0.32), 0 2px 4px rgba(11,31,51,0.20);
		transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.hansen-menu-hint--fab:active {
		transform: scale(0.94);
	}
	.hansen-menu-hint--fab:focus-visible {
		outline: 2px solid var(--wp--preset--color--moss);
		outline-offset: 3px;
	}
	.hansen-menu-hint--fab.is-open {
		background: var(--wp--preset--color--moss);
	}

	/* --- Header-row hamburger button (top-right, in the masthead) --
	 * Smaller, hairline-outlined, sits inline in the header flex row
	 * next to the site title. Same behaviour, different affordance —
	 * matches the site's editorial style (no shadow, no fill). */
	.hansen-menu-hint--top {
		display: inline-flex;
		position: relative;               /* inline in the header, NOT fixed */
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: transparent;
		border: 1px solid var(--wp--preset--color--rule);
		color: var(--wp--preset--color--ink);
		cursor: pointer;
		padding: 0;
		margin-left: auto;                /* pushes to the far right in flex row */
		box-shadow: none;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.hansen-menu-hint--top:hover,
	.hansen-menu-hint--top:focus-visible {
		border-color: var(--wp--preset--color--ink);
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper);
	}
	.hansen-menu-hint--top.is-open {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper);
		border-color: var(--wp--preset--color--ink);
	}
	.hansen-menu-hint--top .hansen-menu-hint__icon svg {
		width: 20px;
		height: 20px;
	}

	/* Cross-fade between ≡ and × icons based on open state (shared). */
	.hansen-menu-hint__icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(0deg);
		transition: opacity 0.18s ease, transform 0.22s ease;
	}
	.hansen-menu-hint__icon--menu  { opacity: 1; }
	.hansen-menu-hint__icon--close { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg); }
	.hansen-menu-hint.is-open .hansen-menu-hint__icon--menu  { opacity: 0; transform: translate(-50%, -50%) rotate(45deg); }
	.hansen-menu-hint.is-open .hansen-menu-hint__icon--close { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }


	/* --- Editorial popup panel --------------------------------
	 * Design language matches the rest of the site: paper background,
	 * hairline rules (no shadow-heavy card), Fraunces menu items with
	 * an eyebrow header, ink outlined CTA button. Not a phone-style
	 * app sheet; more like a printed editorial masthead index card.
	 * ---------------------------------------------------------- */
	.hansen-menu-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		pointer-events: none;
	}
	.hansen-menu-sheet__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(11, 31, 51, 0.42);
		opacity: 0;
		/* When closed, hide the backdrop from paint entirely so iOS
		 * Safari 17+ doesn't sample the (still-present) blue-grey layer
		 * for its top/bottom chrome tint. `visibility: hidden` removes
		 * it from the compositor while keeping the transition working. */
		visibility: hidden;
		transition: opacity 0.24s ease, visibility 0s linear 0.24s;
	}
	.hansen-menu-sheet.is-open .hansen-menu-sheet__backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.24s ease, visibility 0s linear 0s;
	}
	.hansen-menu-sheet__panel {
		position: absolute;
		width: min(246px, calc((100vw - 2.5rem) * 0.77));
		background: var(--wp--preset--color--paper);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 2px;
		padding: 1.25rem 1.25rem 1rem;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
		max-height: min(72vh, 560px);
		overflow-y: auto;
	}
	/* Anchor A: FAB (bottom-right). Panel rises above the FAB.       */
	.hansen-menu-sheet--from-bottom .hansen-menu-sheet__panel {
		right: calc(1.25rem + env(safe-area-inset-right, 0px));
		bottom: calc(3rem + 56px + 12px + env(safe-area-inset-bottom, 0px));
		transform: translateY(8px);
	}
	/* Anchor B: header button (top-right). Panel drops below the
	 * header, aligned to the right edge. The masthead is roughly
	 * 60–80px tall on phones; 72px keeps a clean gap. */
	.hansen-menu-sheet--from-top .hansen-menu-sheet__panel {
		top: calc(72px + env(safe-area-inset-top, 0px));
		right: calc(1.25rem + env(safe-area-inset-right, 0px));
		bottom: auto;
		transform: translateY(-8px);
	}
	.hansen-menu-sheet.is-open {
		pointer-events: auto;
	}
	.hansen-menu-sheet.is-open .hansen-menu-sheet__panel {
		opacity: 1;
		transform: translateY(0);
	}

	/* Sheet interior */
	.hansen-menu-sheet__grip { display: none; }  /* editorial style: no phone grip */

	.hansen-menu-sheet__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 0.75rem;
		margin-bottom: 0.5rem;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
	.hansen-menu-sheet__eyebrow {
		margin: 0;
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--wp--preset--color--muted);
	}
	.hansen-menu-sheet__close {
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--muted);
		font-family: var(--wp--preset--font-family--sans);
		font-size: 1.5rem;
		font-weight: 300;
		line-height: 1;
		width: 32px;
		height: 32px;
		border-radius: 0;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.15s ease;
	}
	.hansen-menu-sheet__close:hover,
	.hansen-menu-sheet__close:active { color: var(--wp--preset--color--ink); background: transparent; }

	.hansen-menu-sheet__list {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.hansen-menu-sheet__list li {
		list-style: none !important;
		margin: 0;
		padding: 0;
	}
	.hansen-menu-sheet__list li + li {
		border-top: 1px solid var(--wp--preset--color--rule);
	}
	.hansen-menu-sheet__link {
		display: flex !important;
		align-items: baseline;
		justify-content: space-between;
		padding: 0.85rem 0;
		font-family: var(--wp--preset--font-family--serif);
		font-size: 1.125rem;
		font-weight: 500;
		letter-spacing: -0.005em;
		color: var(--wp--preset--color--ink) !important;
		text-decoration: none !important;
		transition: color 0.15s ease;
	}
	.hansen-menu-sheet__link:hover,
	.hansen-menu-sheet__link:active,
	.hansen-menu-sheet__link:focus {
		color: var(--wp--preset--color--moss) !important;
		text-decoration: none !important;
	}
	.hansen-menu-sheet__arrow {
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.9375rem;
		color: var(--wp--preset--color--muted);
		transition: transform 0.2s ease, color 0.15s ease;
	}
	.hansen-menu-sheet__link:hover .hansen-menu-sheet__arrow {
		color: var(--wp--preset--color--moss);
		transform: translateX(3px);
	}

	/* CTA is an outlined ink button matching the site's is-style-outline. */
	.hansen-menu-sheet__cta {
		display: block;
		margin-top: 1rem;
		padding: 0.75rem 1rem;
		background: transparent;
		color: var(--wp--preset--color--ink) !important;
		text-align: center;
		text-decoration: none !important;
		font-family: var(--wp--preset--font-family--sans);
		font-weight: 600;
		font-size: 0.8125rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		border: 1px solid var(--wp--preset--color--ink);
		border-radius: 0;
		transition: background 0.18s ease, color 0.18s ease;
	}
	.hansen-menu-sheet__cta:hover,
	.hansen-menu-sheet__cta:active {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper) !important;
	}
}

/* On any width ≤900px the panel anchors to the FAB corner (see above).
 * The panel is already capped to 320px wide, so no separate 783–900px
 * override is needed — the popup looks the same on phone and narrow
 * desktop, matching the site's editorial-consultant tone. */

/* Lock body scroll while the panel is open. */
html.hansen-menu-open,
html.hansen-menu-open body {
	overflow: hidden;
	touch-action: none;
}

/* ============================================================
 * MOBILE — ≤ 782px (Spec §9)
 * Reduce vertical rhythm, stack columns, size down big serif,
 * make buttons full-width, tighten cards.
 * ============================================================ */
@media (max-width: 782px) {

	/* Reprogram section spacing tokens for phone.
	 * Every pattern uses var(--wp--preset--spacing--60/30) for section
	 * padding, so overriding these two values shrinks the whole site
	 * without touching individual patterns.                          */
	:root {
		--wp--preset--spacing--60: 3rem;      /* was ~6rem  */
		--wp--preset--spacing--30: 1.25rem;   /* was ~1.5rem */
	}

	/* --- Hero --- */
	/* Stack columns, portrait first at 140px, headline breathes */
	.wp-block-columns.are-vertically-aligned-center {
		gap: 1.5rem !important;
	}
	.wp-block-column {
		flex-basis: 100% !important;
	}
	/* Portrait shrinks; keep the ink circle proportional */
	.wp-block-column figure > div {
		width: 128px !important;
		height: 128px !important;
		font-size: 3rem !important;
	}
	.hansen-hero__signature {
		font-size: 1rem;
	}

	/* Big display headings: cap font-size on phones */
	h1.wp-block-heading {
		font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
		line-height: 1.08 !important;
	}
	h2.wp-block-heading {
		font-size: clamp(1.625rem, 6vw, 2rem) !important;
		line-height: 1.15 !important;
	}

	/* Buttons full-width on phone for easy tap */
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}
	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		display: flex;
		width: 100%;
		padding: 0.875rem 1.25rem;
		font-size: 1rem;
	}

	/* --- Trust — collapse the 4-up grid to single column --- */
	.hansen-trust-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		border-top: 1px solid var(--wp--preset--color--rule);
	}
	.hansen-trust-item {
		padding-top: 1.5rem;
		border-bottom: 1px solid var(--wp--preset--color--rule);
		padding-bottom: 1.5rem;
	}
	.hansen-trust-item:last-child { border-bottom: 0; padding-bottom: 0; }
	.hansen-trust-item__title { font-size: 1.25rem; }

	/* --- Services — single column, remove double borders --- */
	.hansen-service-grid {
		grid-template-columns: 1fr;
	}
	.hansen-service-card {
		padding: 1.5rem 0;
		border-right: 0;
	}
	.hansen-service-card__title { font-size: 1.25rem; }

	/* --- Process — keep numeral+body on one row, tighter --- */
	.hansen-process .wp-block-columns {
		flex-wrap: nowrap !important;
		gap: 1rem !important;
	}
	.hansen-process .wp-block-column:first-child {
		flex-basis: 3.25rem !important;
		flex-grow: 0 !important;
	}
	.hansen-process .hansen-step__num { font-size: 1.875rem !important; }
	.hansen-process .hansen-step__title { font-size: 1.125rem !important; }

	/* --- Case cards / Insights loop — full width, tighter --- */
	.hansen-case-card {
		padding-top: 1.25rem;
	}
	.hansen-case-card__title { font-size: 1.25rem; }

	/* --- CTA — reduce padding, keep punch --- */
	.hansen-cta {
		padding: 3rem 1.25rem;
	}
	.hansen-cta h2, .hansen-cta h3 { font-size: 1.75rem !important; }

	/* --- FAQ — tighter summary --- */
	.hansen-faq summary { font-size: 1.0625rem; padding-right: 1.75rem; }
	.hansen-faq details { padding: 1rem 0; }
	.hansen-faq details p { font-size: 0.9375rem; }

	/* --- Author card — smaller avatar, tighter gap --- */
	.hansen-author-card {
		grid-template-columns: 40px 1fr;
		gap: 0.875rem;
		padding: 1.25rem 0;
	}
	.hansen-author-card__avatar {
		width: 40px;
		height: 40px;
		font-size: 0.8125rem;
	}
	.hansen-author-card__name { font-size: 1.0625rem; }

	/* --- Reading measure — remove cap on phone (viewport already narrow) --- */
	.entry-content > p,
	.entry-content > ul,
	.entry-content > ol,
	.entry-content > blockquote {
		max-width: none;
	}

	/* Drop cap — smaller on phone so first line still breathes */
	.entry-content .has-drop-cap:first-letter {
		font-size: 3.25rem;
	}

	/* --- Masthead — logo left, hamburger right, hide Contact button --- */
	.hansen-masthead .wp-block-buttons {
		display: none;
	}
	.wp-block-site-title a { font-size: 1.125rem; }

	/* --- Footer stacked --- */
	.hansen-footer .wp-block-group {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
	}
}

/* Extra squeeze for narrow phones (≤ 400px) */
@media (max-width: 400px) {
	.wp-block-column figure > div {
		width: 108px !important;
		height: 108px !important;
		font-size: 2.5rem !important;
	}
	h1.wp-block-heading {
		font-size: 1.875rem !important;
	}
	.hansen-process .wp-block-column:first-child {
		flex-basis: 2.5rem !important;
	}
}