@charset "UTF-8";
/*
 * Ascenthya — responsive foundation
 * -----------------------------------------------------------------------------
 * Loaded on every front-end request, after Elementor's kit and after the header
 * stylesheet, so it can correct things the page builder and the theme get wrong
 * on a handset without anyone having to remember a per-widget setting.
 *
 * Design rules observed here:
 *   1. Almost every selector is wrapped in :where() so it carries ZERO
 *      specificity. A deliberate Elementor setting always wins; this file only
 *      supplies the floor. (The exceptions are commented where they occur.)
 *   2. No !important except where an Elementor-generated rule must be beaten,
 *      and then only inside a mobile media query.
 *   3. Nothing here changes the desktop composition. Every layout rule is
 *      either viewport-independent hygiene or gated behind a max-width query.
 */

/* ===========================================================================
 * 1. Shared design tokens
 *
 * The header, the client portal, the discovery questionnaire and the associate
 * area each declared their own copy of the type stack. They are declared once
 * here so a font change is a one-line change, and so any markup that is NOT
 * inside one of those modules (search results, 404, plugin output, the login
 * screens) still renders in the firm's typefaces instead of falling back to
 * the handset's system sans — which is what makes a page "look wrong on a
 * phone" more often than any layout bug.
 * ======================================================================== */

:root {
	--asc-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--asc-font-display: "Poppins", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--asc-font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

	/* One gutter for the whole site. Matches the header shell exactly, so the
	   left edge of a heading lines up with the left edge of the logo at every
	   width instead of drifting by a few pixels below 480px. */
	--asc-gutter: clamp(16px, 3vw, 40px);

	/* Safe-area aware gutters for notched handsets in landscape. */
	--asc-gutter-l: max(var(--asc-gutter), env(safe-area-inset-left, 0px));
	--asc-gutter-r: max(var(--asc-gutter), env(safe-area-inset-right, 0px));
}

/* ===========================================================================
 * 2. Horizontal overflow
 *
 * The single most common mobile failure. One element 3px wider than the
 * viewport gives the whole document a sideways scroll, and every section then
 * reads as misaligned. Three causes, three fixes.
 * ======================================================================== */

/* (a) The document itself must not scroll sideways.
 *     `clip` rather than `hidden`: `hidden` turns the root into a scroll
 *     container, which silently kills `position: sticky` on descendants.
 *     `hidden` is kept as the fallback for engines without `clip`. */
html,
body {
	overflow-x: hidden;
}

@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

/* (b) Flex and grid children default to min-width:auto, which refuses to
 *     shrink below their content. A long unbroken string — an email address,
 *     a reference number, a table — then pushes the row wider than the screen.
 *     Elementor never sets this. */
:where(.e-con, .e-con-inner, .elementor-widget-wrap, .elementor-column) > *,
:where(.elementor-widget-container) {
	min-width: 0;
}

/* (c) 100vw is not the viewport. It excludes the scrollbar on desktop and, on
 *     iOS, is measured against the layout viewport rather than the visual one,
 *     so a "full bleed" section set to 100vw overflows. 100% of a body that
 *     cannot scroll sideways is the correct full-bleed width. */
:where(.e-con, .elementor-section, .elementor-container)[style*="100vw"],
:where(.e-con, .elementor-section) {
	max-width: 100%;
}

/* Long tokens wrap rather than push. */
:where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, label, a) {
	overflow-wrap: break-word;
}

/* ===========================================================================
 * 3. Replaced elements
 *
 * Zero specificity, so any width or height an editor sets in Elementor still
 * wins; this is only the floor for content that arrives without one — pasted
 * embeds, plugin output, imported posts, PDF previews.
 * ======================================================================== */

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	max-width: 100%;
}

:where(img, video) {
	height: auto;
}

/* Code and preformatted blocks scroll inside themselves rather than widening
 * the page. */
:where(pre) {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ===========================================================================
 * 4. Tables
 *
 * A returns grid or a directory listing cannot usefully reflow — the columns
 * mean something. It scrolls inside its own frame instead, so the page around
 * it stays still. The wrapper is added by ascenthya-responsive.js for any
 * table that does not already have one; this styles it.
 * ======================================================================== */

.asc-table-scroll {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

/* A hairline on the edge that can still be scrolled to, so it is discoverable
 * rather than a hidden affordance. */
.asc-table-scroll[data-asc-overflow="true"] {
	background:
		linear-gradient(90deg, rgba(31, 41, 51, .08), rgba(31, 41, 51, 0)) 100% 0 / 14px 100% no-repeat;
}

.asc-table-scroll > table {
	margin: 0;
}

/* ===========================================================================
 * 5. Forms
 *
 * iOS zooms the entire page the moment focus lands in a control whose computed
 * font-size is below 16px, and it does not zoom back out. Every hand-built form
 * on this site — associate sign-up, associate login, the TOTP prompt, the
 * discovery questionnaire — is affected. `max(16px, 1em)` keeps any deliberate
 * larger size intact.
 *
 * This block is NOT wrapped in :where(): it has to beat theme and plugin rules
 * that set a smaller size, because the consequence is a broken page rather than
 * a cosmetic difference.
 * ======================================================================== */

@media (max-width: 767px) {

	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
	select,
	textarea {
		font-size: max(16px, 1em);
	}

	/* Controls fill the column rather than sitting at a desktop pixel width. */
	:where(.site-main, .page-content, .entry-content, .ascp-portal, .ascd-app) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
		width: 100%;
		max-width: 100%;
	}
}

/* Comfortable, thumb-sized controls at every width. 44px is the Apple HIG
 * minimum and the WCAG 2.2 target-size floor. Zero specificity, so a component
 * that deliberately sets its own height (the burger, the utility links) is
 * untouched. */
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, .asc-cta, .ascp-button) {
	min-height: 44px;
}

:where(input[type="checkbox"], input[type="radio"]) {
	min-width: 20px;
	min-height: 20px;
}

/* Native form controls inherit the firm's typeface instead of the handset's. */
:where(input, select, textarea, button) {
	font-family: inherit;
}

/* ===========================================================================
 * 6. Header, drawer and safe areas
 *
 * The header already collapses to a drawer below 1024px. What it does not do
 * is account for a notch, a home indicator, or a browser chrome that changes
 * height while you scroll — all three of which cut content off on the devices
 * clients actually use.
 * ======================================================================== */

@supports (padding: max(0px)) {

	.asc-shell {
		padding-left: var(--asc-gutter-l);
		padding-right: var(--asc-gutter-r);
	}

	.asc-drawer__inner {
		padding-left: var(--asc-gutter-l);
		padding-right: var(--asc-gutter-r);
		/* Clear of the home indicator, plus the browser's own bottom chrome. */
		padding-bottom: max(56px, calc(32px + env(safe-area-inset-bottom, 0px)));
	}
}

/* The drawer is measured against the SMALL viewport: sized to the largest the
 * browser chrome ever gets, so the last menu item is never left hidden behind
 * an address bar that slides back in. */
@supports (height: 100svh) {
	.asc-drawer {
		max-height: calc(100svh - var(--asc-bar-h));
	}

	.asc-header.is-stuck .asc-drawer {
		max-height: calc(100svh - var(--asc-bar-h-stuck));
	}
}

/* Drawer links at a real tap size. 9px of padding on a 15.5px line is a 33px
 * target; 13px makes it 44px. Nothing about the desktop menu changes. */
@media (max-width: 1024px) {

	.asc-drawer__panel a {
		padding: 13px 0;
	}

	.asc-drawer__top {
		min-height: 56px;
	}

	/* The utility bar is hidden at this width, so the search and burger are the
	   only controls left in the bar — give them room rather than letting the
	   wordmark squeeze them off the edge. */
	.asc-brand {
		min-width: 0;
	}

	.asc-brand__text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* iOS keeps scrolling the document behind an overlay even when the body is set
 * to overflow:hidden. ascenthya-responsive.js pins the body and records the
 * offset in a custom property; this consumes it, so the page does not jump to
 * the top when the drawer opens and does not scroll underneath while it is
 * open. */
body.asc-nav-open {
	position: fixed;
	top: calc(var(--asc-scroll-lock, 0px) * -1);
	left: 0;
	right: 0;
	width: 100%;
}

/* ===========================================================================
 * 7. Full-height sections
 *
 * 100vh on a phone is the height of the viewport with the browser chrome
 * RETRACTED, so a hero set to 100vh is always taller than what you can see and
 * its bottom edge — usually the call to action — sits below the fold on first
 * paint. 100dvh tracks the chrome. Applied only below the tablet breakpoint;
 * desktop keeps vh.
 * ======================================================================== */

@media (max-width: 1024px) {
	@supports (height: 100dvh) {

		.asc-fullheight,
		.e-con.asc-fullheight {
			min-height: 100dvh;
		}

		/* The front-page hero (container c30a942) is set to width:100vw and
		   min-height:100vh in the page's own Elementor CSS, which is why the
		   home page scrolls sideways by the scrollbar width and clips its
		   carousel on a handset. Elementor writes that rule into a generated
		   stylesheet keyed to the element id, so it has to be answered by name. */
		.elementor-element.elementor-element-c30a942 {
			width: 100% !important;
			max-width: 100% !important;
			min-height: 100dvh !important;
		}
	}

	/* Same correction for engines without dvh — the width fix matters more than
	   the height fix and must not depend on it. */
	.elementor-element.elementor-element-c30a942 {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ===========================================================================
 * 8. Elementor content on small screens
 *
 * The pages generated in May carry sensible per-breakpoint padding. Anything
 * added later, by hand or by a template import, will not. These are floors, so
 * an explicit setting still wins.
 * ======================================================================== */

@media (max-width: 767px) {

	/* No section should ever run edge to edge with its text touching the glass. */
	:where(.e-con > .e-con-inner) {
		padding-left: max(16px, env(safe-area-inset-left, 0px));
		padding-right: max(16px, env(safe-area-inset-right, 0px));
	}

	/* Carousels: the arrows sit outside the frame on narrow screens and create
	   the overflow they are supposed to scroll. */
	:where(.elementor-widget-nested-carousel, .elementor-widget-testimonial-carousel, .elementor-widget-image-carousel) {
		max-width: 100%;
		overflow: hidden;
	}

	:where(.swiper, .elementor-swiper) {
		max-width: 100%;
	}
}

/* ===========================================================================
 * 9. Typography floor for markup outside Elementor
 *
 * Search results, the 404, the associate area, plugin output and anything a
 * future editor pastes in are rendered by the theme, which sets no scale of
 * its own. Without this they inherit 16px Helvetica at every size and the site
 * visibly changes identity the moment a client leaves an Elementor page.
 * ======================================================================== */

:where(body) {
	font-family: var(--asc-font);
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--asc-font-display);
	line-height: 1.2;
	text-wrap: balance;
}

/* Everything below is scoped to pages the page builder does NOT render.
 * On an Elementor page the widgets own their own type scale and their own
 * gutters, and a stray padding here would inset every full-bleed section. */

/* Fluid, not stepped: no width between 360px and 1440px gets a heading that is
 * either too big to fit or too small to lead. */
body:not(.elementor-page) :where(.site-main, .page-content, .entry-content) :where(h1) { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.5rem); }
body:not(.elementor-page) :where(.site-main, .page-content, .entry-content) :where(h2) { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.6rem); }
body:not(.elementor-page) :where(.site-main, .page-content, .entry-content) :where(h3) { font-size: clamp(1.25rem, 1.08rem + 0.8vw, 1.8rem); }
body:not(.elementor-page) :where(.site-main, .page-content, .entry-content) :where(p, li) { font-size: 1rem; line-height: 1.6; }

/* A comfortable measure. Prose past ~72 characters is hard to track back on a
 * phone held at arm's length. Zero specificity, so the portal's own 62ch
 * measure and anything else deliberate still wins. */
body:not(.elementor-page) :where(.site-main, .page-content, .entry-content) :where(p, li, dd) {
	max-width: 72ch;
}

/* The theme gives non-Elementor pages no gutter at all — the associate
 * sign-up, login and account screens currently run their form fields into
 * both edges of the glass. */
body:not(.elementor-page) :where(.site-main) {
	padding-left: var(--asc-gutter-l);
	padding-right: var(--asc-gutter-r);
	padding-bottom: max(48px, env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1025px) {
	body:not(.elementor-page) :where(.site-main) {
		max-width: 1320px;
		margin-inline: auto;
	}
}

/* ===========================================================================
 * 10. Accessibility and motion
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {

	:where(html) {
		scroll-behavior: auto;
	}
}

/* A visible focus ring on touch devices too — associates and clients log in
 * from phones, and a keyboard is often attached. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid #C9971A;
	outline-offset: 2px;
}

/* ===========================================================================
 * 11. Print
 * ======================================================================== */

@media print {

	.asc-table-scroll {
		overflow: visible;
	}

	:where(body) {
		background: #fff;
	}
}