/* ==========================================================================
   ART CENTRRAL — component details
   Small type and spacing rules for the classes the page templates apply.
   Loaded after ac-layout.css.
   ========================================================================== */

/* ---------- hero and page intros ---------- */

.ac-lead {
	font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
	color: var(--ac-text);
	max-width: 52ch;
}
.ac-section--dark .ac-lead { color: rgba(255, 255, 255, .7); }

.ac-hero-title .elementor-heading-title { max-width: 17ch; }
.ac-page-title .elementor-heading-title { max-width: 20ch; }

.ac-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: .84rem;
	color: var(--ac-muted);
}
.ac-hero-meta li { display: flex; align-items: center; gap: 9px; }
.ac-hero-meta li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ac-primary);
	flex: none;
}

/* ---------- section heading note ---------- */

.ac-note-lg p {
	color: var(--ac-muted);
	font-size: .95rem;
	max-width: 46ch;
}
.ac-sec-head--center .ac-note-lg p { margin-inline: auto; }
.ac-section--dark .ac-note-lg p { color: rgba(255, 255, 255, .6); }

/* ---------- highlight tiles ---------- */

.ac-tile-icon .elementor-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ac-radius);
	background: var(--ac-light-2);
	color: var(--ac-primary);
	margin-bottom: 8px;
	border: 0;
	padding: 0;
}
.ac-tile-icon .elementor-icon svg { width: 20px; height: 20px; fill: currentColor; }
/*
 * The tile heading is an h2 for the document outline and an h3 to the eye.
 *
 * These four sit directly under the page's h1, so h3 skipped a level and left
 * a hole in the outline a screen reader reads out. Promoting the tag alone
 * handed them the h2 type scale — 3rem display type in a 260px tile, which
 * overflowed and cut "Professional Installation" in half. The tag is for the
 * outline; the size belongs to the design.
 */
.ac-tile .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
}
.ac-tile p { font-size: .9rem; color: var(--ac-muted); }

/* ---------- service cards ---------- */

.ac-card-no .elementor-heading-title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--ac-muted);
}
.ac-card p { font-size: .9rem; color: var(--ac-muted); }

/* ---------- services page rows ---------- */

.ac-service-title .elementor-heading-title {
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
	letter-spacing: -.025em;
}
.ac-uses-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ac-muted);
	margin-bottom: 10px;
}
.e-con.ac-service-row { scroll-margin-top: 110px; }

/* ---------- why-choose list ---------- */

.ac-reason h3,
.ac-reason .elementor-heading-title { font-size: 1.02rem; }
.ac-reason p { font-size: .89rem; }
.ac-section--dark .ac-reason p { color: rgba(255, 255, 255, .6); }

/* ---------- process ---------- */

.ac-step p { font-size: .89rem; color: var(--ac-muted); max-width: 32ch; }

/* ---------- reviews ----------
   The card itself lives in ac-layout.css. Nothing is needed here any more; the
   old rule styled the placeholder slots that the real reviews replaced. */

/* ---------- gallery ---------- */

.ac-gallery-item img {
	border-radius: var(--ac-radius-lg);
	transition: transform .5s var(--ac-ease), box-shadow .4s var(--ac-ease);
}
.ac-gallery-item:hover img {
	transform: translateY(-4px);
	box-shadow: var(--ac-shadow-md);
}

/* ---------- FAQ ---------- */

.ac-faq .elementor-accordion-item {
	border: 0 !important;
	border-bottom: 1px solid var(--ac-border) !important;
}
.ac-faq .elementor-tab-title {
	padding: 22px 0 !important;
	background: transparent !important;
	font-family: var(--e-global-typography-primary-font-family, "Manrope"), sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ac-dark);
}
.ac-faq .elementor-tab-title.elementor-active { color: var(--ac-primary); }
.ac-faq .elementor-tab-content {
	border: 0 !important;
	padding: 0 0 22px !important;
	background: transparent !important;
	font-size: .94rem;
	color: var(--ac-text);
}
.ac-faq .elementor-accordion-icon { color: var(--ac-primary); }

.e-con.ac-faq-aside {
	background: var(--ac-light);
	border-radius: var(--ac-radius-lg);
	--padding-top: clamp(26px, 2.4vw, 36px);
	--padding-bottom: clamp(26px, 2.4vw, 36px);
	--padding-left: clamp(26px, 2.4vw, 36px);
	--padding-right: clamp(26px, 2.4vw, 36px);
	position: sticky;
	top: 110px;
}
.ac-faq-aside p { font-size: .92rem; color: var(--ac-muted); }
@media (max-width: 959px) {
	.e-con.ac-faq-aside { position: static; }
}

/* ---------- portfolio note ---------- */

.ac-note { font-size: .78rem; color: var(--ac-muted); }
.ac-note p { font-size: .78rem; color: var(--ac-muted); margin: 0; }

/* ==========================================================================
   SIGNAGE MOCK-UPS IN ELEMENTOR
   ==========================================================================
   ac-shots.css draws the mock-ups; these rules seat them in the page the way a
   photograph would sit. Elementor wraps an HTML widget in its own containers,
   so those are told not to add a box of their own. */

.ac-media .elementor-widget-container { line-height: 0; }

.ac-media .ac-shot { border-radius: var(--ac-radius-lg); }
.ac-media--shadow .ac-shot { box-shadow: var(--ac-shadow-md); }

/* Inside a card the visual runs edge to edge, square with the card's corners. */
.ac-card .ac-media .ac-shot,
.ac-work-item .ac-shot,
.ac-gallery-item .ac-shot { border-radius: 0; }

/* Cards and tiles lift their visual slightly on hover, as in the prototype. */
.ac-card .ac-shot,
.ac-work-item .ac-shot,
.ac-gallery-item .ac-shot {
	transition: transform .55s var(--ac-ease, cubic-bezier(.22,.61,.36,1));
}
.ac-card:hover .ac-shot,
.ac-work-item:hover .ac-shot,
.ac-gallery-item:hover .ac-shot { transform: scale(1.045); }

/* In the portfolio grid the row height is set by the grid, not by the tile, so
   the visual has to fill its tile rather than hold its own aspect ratio —
   otherwise a landscape photograph leaves a band of empty card beneath it.

   Every level between the tile and the img needs a height for `height: 100%`
   on the img to resolve against anything. The lightbox link is the one that
   catches people out: Elementor wraps the image in an <a>, an inline box with
   an auto height, and `height: 100%` measured against auto computes to auto —
   so the image quietly falls back to its natural ratio and the tile shows
   through. It has to be a block with a height like the rest of the chain.

   .elementor-widget-container is listed but does not exist in Elementor 4.x,
   which drops the wrapper and puts the content straight inside the widget.
   The selector costs nothing and keeps this working either way. */
.ac-work-item > .ac-media,
.ac-work-item > .ac-media > a,
.ac-work-item > .ac-media > .elementor-widget-container,
.ac-work-item > .ac-media > .elementor-widget-container > a { display: block; height: 100%; }
.ac-work-item .ac-shot { height: 100%; }
.ac-work-item .ac-media img { height: 100%; width: 100%; object-fit: cover; }

/* ==========================================================================
   LAYERED ABOUT COMPOSITION
   ==========================================================================
   Two visuals, the smaller overlapping the corner of the larger. The offset is
   what gives these sections depth; one flat image in a column reads as a stock
   photo, which is exactly what the design is trying not to look like. */

.e-con.ac-about-media {
	position: relative;
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
}

.e-con.ac-about-media .ac-about-media-2 {
	position: absolute;
	right: -8%;
	bottom: -12%;
	width: 44%;
	z-index: 2;
	/* The white keyline is what separates the two layers. */
	border: 6px solid #fff;
	border-radius: var(--ac-radius-lg);
	box-shadow: var(--ac-shadow-md);
}
.ac-about-media .ac-about-media-2 .ac-shot,
.ac-about-media .ac-about-media-2 img {
	border-radius: 2px;
	box-shadow: none;
}

@media (min-width: 960px) {
	.e-con.ac-about-media .ac-about-media-2 { width: 46%; }
}
@media (max-width: 959px) {
	.e-con.ac-about-media .ac-about-media-2 { right: 0; bottom: -8%; width: 38%; }
}
/* Below this the overlap has nowhere to go without clipping the copy. */
@media (max-width: 640px) {
	.e-con.ac-about-media .ac-about-media-2 { display: none; }
}

/* ==========================================================================
   HERO MEDIA
   ========================================================================== */

.e-con.ac-hero-media {
	position: relative;
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
}

/* A small plate that overlaps the corner of the hero photograph — the one
   decorative flourish on the page, borrowed from the approved prototype. */
.e-con.ac-hero-badge {
	position: absolute;
	left: -14px;
	bottom: -18px;
	z-index: 4;
	width: auto;
	--width: auto;
	--flex-direction: row;
	--align-items: center;
	--row-gap: 14px;
	--column-gap: 14px;
	gap: 14px;
	--padding-top: 16px; --padding-bottom: 16px;
	--padding-left: 20px; --padding-right: 20px;
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	box-shadow: var(--ac-shadow-sm);
}
.ac-hero-badge p {
	font-size: .8rem;
	line-height: 1.35;
	font-weight: 500;
	color: var(--ac-ink);
	margin: 0;
}
.ac-hero-badge__no .elementor-heading-title {
	font-family: var(--e-global-typography-primary-font-family, "Manrope"), sans-serif;
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--ac-primary);
}

@media (max-width: 560px) {
	.e-con.ac-hero-badge { display: none; }
}

/* ==========================================================================
   CLIENT CHANGE LIST — 10 September 2026
   ==========================================================================
   Everything below exists because of one line on the list the client sent.
   Kept together rather than filed by component so the next person can see
   what was asked for and undo one item without hunting.
   ========================================================================== */

/* ---- 1. the warranty, highlighted -------------------------------------
   "Mention & highlight 5 Years Warranty."

   Two places carry it visually: the first item of the hero meta list, which
   is above the fold on the homepage, and the second promise tile under it.
   Both are marked in PHP rather than by position, so reordering either list
   does not move the highlight onto the wrong thing. */

.ac-hero-meta li.is-flag {
	color: #fff;
	font-weight: 600;
	letter-spacing: .01em;
	background: rgba(228, 87, 46, .16);
	border: 1px solid rgba(228, 87, 46, .5);
	border-radius: 999px;
	padding: 5px 13px 5px 11px;
}
/* The dot becomes a tick: inside a pill, a bullet reads as decoration, and
   this one item is making a promise the other two are not. */
.ac-hero-meta li.is-flag::before {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	content: "\2713";
	font-size: .82em;
	line-height: 1;
	color: var(--ac-primary-bright, #E4572E);
}
.ac-hero-cine .ac-hero-meta li.is-flag { color: #fff; }
.ac-hero-cine .ac-hero-meta li.is-flag::before { background: none; }

/* The promise tile. The hairline grid paints its own white ground, so this
   tints rather than replaces it — a solid orange cell in a row of four white
   ones is louder than the strip can take. */
.e-con.ac-tile--flag {
	background: linear-gradient(180deg, rgba(228, 87, 46, .13), rgba(228, 87, 46, .04));
	box-shadow: inset 3px 0 0 var(--ac-primary);
}
/* The flagged tile's icon is NOT styled here.

   Elementor writes the icon widget's colours as .elementor-N
   .elementor-element.elementor-element-X.elementor-view-framed
   .elementor-icon — four classes, in a file that loads after this one, so
   nothing reasonable written here outranks it. The white glyph on brand
   orange is set in 05-pages.php as the widget's own primary_color and
   secondary_color instead. */
.ac-tile--flag .elementor-widget-heading .elementor-heading-title { color: var(--ac-primary-d, #B23A19); }
.ac-section--dark .ac-tile--flag { background: rgba(228, 87, 46, .12); }
.ac-section--dark .ac-tile--flag .elementor-widget-heading .elementor-heading-title { color: #fff; }

/* ---- 5. Google branding on the reviews --------------------------------
   "Google reviews branding."

   A bar above the carousel carrying Google's own G, the rating, the stars
   and the count, plus a smaller G on every card. The card is what a phone
   shows one at a time, so the card has to say where the review came from. */

.ac-gbar-wrap { width: 100%; }

.ac-gbar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	margin-inline: auto;
	width: fit-content;
	max-width: 100%;
	padding: 14px 20px;
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	box-shadow: 0 1px 2px rgba(16, 17, 18, .04);
}
.ac-gbar__mark { display: flex; flex: none; }
.ac-gbar__body { display: grid; gap: 2px; }
.ac-gbar__title {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ac-muted);
}
.ac-gbar__score { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ac-gbar__score strong {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ac-dark, #101112);
}
/* Google's own star gold, not the brand orange. The whole point of this bar
   is that it looks like it came from Google. */
.ac-gbar__stars { color: #F5A623; letter-spacing: .1em; line-height: 1; font-size: .95rem; }
.ac-gbar__count { font-size: .82rem; color: var(--ac-muted); }
/* Scoped two classes deep on purpose. The Elementor kit writes
   .elementor-kit-5 a and .elementor-kit-5 a:hover, which are (0,1,1) and
   (0,2,1); a bare .ac-gbar__cta loses to both and this link came out the
   kit's ink colour instead of the brand orange. */
.ac-gbar-wrap .ac-gbar a.ac-gbar__cta {
	font-size: .84rem;
	font-weight: 600;
	color: var(--ac-primary);
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--ac-ease, ease), color .2s var(--ac-ease, ease);
}
.ac-gbar-wrap .ac-gbar a.ac-gbar__cta:hover {
	color: var(--ac-primary-d, #B23A19);
	border-bottom-color: currentColor;
}

@media (max-width: 520px) {
	.ac-gbar { width: 100%; justify-content: flex-start; }
	.ac-gbar__cta { width: 100%; }
}

/* Card header: stars on the left, the G on the right. */
.ac-review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}
.ac-review__top .ac-g { flex: none; opacity: .95; }

/* An initial in a disc where Google would show a profile picture. Drawn, not
   fetched: pulling avatars off Google's servers would be hotlinking somebody
   else's images and would break the day the URL changes. */
.ac-review__by { flex-direction: row; align-items: center; gap: 11px; }
.ac-review__avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ac-light-2, #EFEFEA);
	color: var(--ac-primary-d, #B23A19);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
}
.ac-review__who { display: grid; gap: 2px; min-width: 0; }

/* ---- 6. the pre-footer CTA band, smaller ------------------------------
   "Change cta section size."

   It was a full-height section with display-size type, so on every page the
   last thing before the footer was the loudest thing on the page. */

.e-con.ac-section.ac-cta-band {
	--padding-top: clamp(38px, 2.6vw + 22px, 62px);
	--padding-bottom: clamp(38px, 2.6vw + 22px, 62px);
}
.ac-cta-band .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
	line-height: 1.12;
}
/* The two buttons sat right-aligned under a heading that no longer fills its
   half, which left a gap down the middle of the band. */
@media (min-width: 960px) {
	.ac-cta-band .ac-split--even { --align-items: center; align-items: center; }
}

/* ---- 7. social icons in the footer ------------------------------------
   "Add Facebook & Youtube in footer with icons."

   A row of circles at the foot of the contact column. Each renders only when
   business.php has a URL for it, so the row is one wide today and three wide
   the day the client sends the other two. */

/* The footer column carries .ac-footer-links, whose own a and a:hover rules
   are (0,2,0) and (0,3,0). These are written one level deeper again so the
   circle keeps its colours and does not inherit the sideways nudge that rule
   gives text links — on a circle that reads as the icon coming loose. */
.ac-socials { display: flex; gap: 10px; margin-top: 6px; }
.ac-footer-links .ac-socials a.ac-social,
.ac-socials a.ac-social {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .78);
	padding: 0;
	transition: background .2s var(--ac-ease, ease), color .2s var(--ac-ease, ease),
		border-color .2s var(--ac-ease, ease), transform .2s var(--ac-ease, ease);
}
.ac-socials a.ac-social svg { display: block; fill: currentColor; }
.ac-footer-links .ac-socials a.ac-social:hover,
.ac-socials a.ac-social:hover {
	color: #fff;
	transform: translateY(-2px);
	border-color: transparent;
	padding-left: 0;
}
.ac-footer-links .ac-socials a.ac-social--instagram:hover,
.ac-socials a.ac-social--instagram:hover { background: linear-gradient(45deg, #F09433, #DC2743 55%, #BC1888); }
.ac-footer-links .ac-socials a.ac-social--facebook:hover,
.ac-socials a.ac-social--facebook:hover  { background: #1877F2; }
.ac-footer-links .ac-socials a.ac-social--youtube:hover,
.ac-socials a.ac-social--youtube:hover   { background: #FF0000; }

/* ---- 9. the rest of the range, on the portfolio -----------------------
   "Take care all services mentioned in portfolio."

   Four services have no photograph of a finished job yet. They are named
   under the grid rather than filled in with stock, which is the one thing
   this portfolio may not do. */

.e-con.ac-coverage-tile {
	--padding-top: 24px; --padding-bottom: 24px;
	--padding-left: 24px; --padding-right: 24px;
	--row-gap: 8px;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	--align-items: flex-start;
}
.ac-coverage-no .elementor-heading-title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--ac-primary);
}
.ac-coverage-tile p { font-size: .88rem; color: var(--ac-muted); margin: 0; }
/* The link sits on the floor of the tile so all four line up whatever the
   descriptions above them do. */
.ac-coverage-tile .ac-link { margin-top: auto; padding-top: 6px; }

/* ---- 13-15. what we cover, on About -----------------------------------
   "Signage point change / Digital Print point add / Offset Print."

   Three tiles became four, and the lists inside them got longer — six items
   under Signage where the longest before was four. */

.ac-capabilities .ac-tile { --row-gap: 10px; gap: 10px; }
.ac-capabilities .ac-ticklist ul { gap: 7px; }
.ac-capabilities .ac-ticklist li { font-size: .88rem; }
@media (min-width: 1024px) {
	.ac-capabilities .ac-tile p { min-height: 5em; }
}

/* ---- 2. the flipped phone icon ----------------------------------------
   "Flip cta icon."

   Font Awesome 5 draws fa-phone with the handset tipped down to the left,
   which is the one glyph in the set most people read as back to front. The
   header CTA was moved to fa-phone-alt, which is the same handset mirrored.
   The floating call button carries its own inline SVG of the same shape, so
   it is mirrored here to match rather than redrawn. */
.ac-fabs a.ac-fab--call svg { transform: scaleX(-1); }

/* ==========================================================================
   THE QUOTE POPUP
   ==========================================================================
   Opened by every "Get a quote" on the site. The markup is printed in the
   footer by artcentrral_quote_modal(); ac-site.js does the opening, the focus
   trap and the Escape key.

   Written with [hidden] doing the hiding, so the dialog is out of the
   accessibility tree and out of tab order before the script runs at all. The
   is-open class is only the fade: it is added a frame after the attribute is
   removed, because a transition on an element that has just stopped being
   display:none does not run.
   ========================================================================== */

.ac-modal[hidden] { display: none !important; }

/*
   Visible by default, and animated in rather than transitioned in.

   The first version faded from opacity: 0 on a transition, which meant the
   dialog was only visible if the transition actually ran. Anything that stops
   transitions — an extension, a headless browser, a paused tab — left an
   invisible overlay holding the page scroll hostage. An animation cannot fail
   that way: if it never runs, the element simply shows its own styles.
 */
.ac-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;          /* over the sticky header and the floating buttons */
	display: grid;
	place-items: center;
	padding: clamp(12px, 4vw, 40px);
}
/* No fill-mode. animation-fill-mode: both pins the element on its from
   keyframe whenever the animation has not run yet or cannot run, which is
   the invisible-overlay failure all over again. Without it, an animation
   that never runs simply leaves the dialog showing its own styles. */
.ac-modal.is-open { animation: ac-modal-in .22s var(--ac-ease, ease); }
@keyframes ac-modal-in { from { opacity: 0; } }

.ac-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(16, 17, 18, .62);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.ac-modal__panel {
	position: relative;
	width: min(100%, 560px);
	/* dvh, not vh: on a phone vh is the height with the browser chrome hidden,
	   so a panel sized in vh is taller than the screen actually is until you
	   scroll. The vh line is the fallback for anything that predates dvh. */
	max-height: min(92vh, 860px);
	max-height: min(92dvh, 860px);
	/* The content is meant to fit. This is the safety net for a screen shorter
	   than anything measured, and for the moment the on-screen keyboard opens
	   and takes half the viewport with it. */
	overflow-y: auto;
	overscroll-behavior: contain;   /* scrolling the form does not scroll the page */
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border-radius: var(--ac-radius-lg);
	box-shadow: 0 24px 70px rgba(16, 17, 18, .34);
	padding: clamp(22px, 3vw, 38px);
}
.ac-modal.is-open .ac-modal__panel {
	animation: ac-modal-panel-in .3s var(--ac-ease, cubic-bezier(.22, 1, .36, 1));
}
@keyframes ac-modal-panel-in { from { transform: translateY(12px) scale(.985); } }
/* The phone sheet rises from the bottom edge rather than growing in place. */
@keyframes ac-modal-sheet-in { from { transform: translateY(14px); } }

/* The panel is a programmatic focus target, the way .site-main is for the
   skip link. Without this the global :focus-visible rule draws a 2px brand
   orange ring around the whole dialog the moment it opens, which reads as an
   error state rather than as focus. Everything inside it keeps its ring. */
.ac-modal__panel:focus,
.ac-modal__panel:focus-visible { outline: none; }

/* Scoped two deep: .elementor-kit-N button is (0,1,1) and would otherwise
   paint this the brand orange with the kit's own padding. */
.ac-modal button.ac-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ac-border);
	border-radius: 50%;
	background: #fff;
	color: var(--ac-muted);
	cursor: pointer;
	transition: background .18s var(--ac-ease, ease), color .18s var(--ac-ease, ease),
		border-color .18s var(--ac-ease, ease);
}
.ac-modal button.ac-modal__close:hover {
	background: var(--ac-light-2, #EFEFEA);
	border-color: var(--ac-dark, #101112);
	color: var(--ac-dark, #101112);
}
.ac-modal button.ac-modal__close svg { display: block; }

.ac-modal__title {
	margin: 0 40px 6px 0;       /* clear of the close button */
	font-family: var(--ac-font-head, "Manrope"), sans-serif;
	font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.18;
	color: var(--ac-dark, #101112);
}
.ac-modal__note {
	margin: 0 0 18px;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ac-muted);
}

.ac-modal .ac-form-legal {
	margin: 14px 0 0;
	font-size: .84rem;
	color: var(--ac-muted);
}
.ac-modal .ac-form-legal a {
	color: var(--ac-primary);
	font-weight: 600;
	border-bottom: 1px solid transparent;
}
.ac-modal .ac-form-legal a:hover { border-bottom-color: currentColor; }

/* Hold the page still behind the dialog. position: fixed is deliberately not
   used: it would jump the page to the top on open and lose the reading
   position on close. */
body.ac-modal-open { overflow: hidden; }

/* The floating call and WhatsApp buttons sit at the same corner as the panel
   on a phone, and a dialog with two circles stuck over it reads as a bug. */
body.ac-modal-open .ac-fabs { opacity: 0; pointer-events: none; }
.ac-fabs { transition: opacity .2s var(--ac-ease, ease); }

/* --------------------------------------------------------------------------
   The phone
   --------------------------------------------------------------------------
   The form was 919px of content against 640px of screen on a small phone, so
   it opened already scrolled. Everything below is height coming back out of
   it. Measured at 360x640, 390x844 and 414x896; there is a fit harness at
   /_modal-fit.html that prints the overflow at each.

   The single biggest saving is the grid: two columns all the way down to the
   narrowest phone rather than one, which turns seven stacked fields into four
   rows. Everything else is a few pixels at a time.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
	/* A sheet off the bottom edge, sized to its own content.

	   It was a full-height white page first. Once the form had been cut down to
	   fit, that left 300px of empty white under the send button on an ordinary
	   phone, which reads as a page that failed to load rather than as a dialog.
	   A sheet cannot have empty space below it: it stops where the content
	   stops and the page shows through the scrim above. It is also where a
	   thumb already is, and where the keyboard pushes it anyway. */
	.ac-modal { padding: 0; place-items: end stretch; }
	.ac-modal__panel {
		width: 100%;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 18px 18px 0 0;
		/* The inset keeps the WhatsApp line clear of the home indicator. */
		padding: 44px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	}
	.ac-modal.is-open .ac-modal__panel { animation: ac-modal-sheet-in .3s var(--ac-ease, cubic-bezier(.22, 1, .36, 1)); }

	.ac-modal button.ac-modal__close { top: 8px; right: 8px; }

	.ac-modal__title {
		margin: 0 0 12px;
		font-size: 1.35rem;
	}
	/* The note is the first thing to go. It says what the placeholders in the
	   fields already say, and it costs three lines. */
	.ac-modal__note { display: none; }

	/* Two columns, and the wide fields still span both. */
	.ac-modal .ac-form .ac-form-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
		row-gap: 10px;
	}
	.ac-modal .ac-form .ac-field--wide,
	.ac-modal .ac-form .ac-form-submit { grid-column: 1 / -1; }

	.ac-modal .ac-form .ac-field { gap: 4px; font-size: .72rem; }

	/* 16px exactly, and not a decimal under it. Safari zooms the whole page in
	   when a field smaller than that takes focus, and then the visitor is
	   pinching their way back out of a form they were halfway through. The
	   padding comes down to pay for the larger type. */
	.ac-modal .ac-form input[type="text"],
	.ac-modal .ac-form input[type="tel"],
	.ac-modal .ac-form input[type="email"],
	.ac-modal .ac-form select,
	.ac-modal .ac-form textarea {
		font-size: 16px;
		padding: 8px 11px;
	}
	.ac-modal .ac-form textarea { min-height: 54px; }
	/* Safari decides whether to zoom from the field's font-size, not the
	   placeholder's, so the hint can be smaller than the answer. At 16px in a
	   160px column "10-digit mobile number" was arriving as "10-digit mobile
	   nu". */
	.ac-modal .ac-form input::placeholder,
	.ac-modal .ac-form textarea::placeholder { font-size: 13px; }

	.ac-modal .ac-form .ac-form-submit { margin-top: 0; }
	.ac-modal .ac-form input[type="submit"] { padding: 12px 18px; }

	.ac-modal .ac-form-legal { margin-top: 10px; font-size: .78rem; text-align: center; }
}

/* Tall enough to afford it: the line under the heading comes back. It is
   hidden on a phone only because it costs three lines, not because it is not
   worth reading. */
@media (max-width: 560px) and (min-height: 760px) {
	.ac-modal__note { display: block; margin-bottom: 14px; font-size: .86rem; }
}

/* Short screens, by height rather than width.

   A laptop at 1280x700 is not a phone and gets none of the rules above, but
   it has less room than a phone held upright — the form overflowed it by
   97px. So the compact treatment is keyed to height on its own, and the
   sheet-off-the-bottom is keyed to height and width together, because that
   combination only happens on a handset turned sideways. */
@media (max-height: 760px) {
	.ac-modal__panel { padding-top: 36px; padding-bottom: 16px; }
	.ac-modal__note { display: none; }
	.ac-modal__title { margin: 0 0 8px; font-size: 1.15rem; }
	.ac-modal button.ac-modal__close { top: 8px; right: 10px; }

	/* Everything the phone rules do, applied by height instead of width — a
	   handset turned sideways is 740px wide and 400px tall, so none of them
	   were reaching it. */
	.ac-modal .ac-form .ac-form-grid { row-gap: 8px; column-gap: 10px; }
	.ac-modal .ac-form .ac-field { gap: 3px; font-size: .72rem; }
	.ac-modal .ac-form input[type="text"],
	.ac-modal .ac-form input[type="tel"],
	.ac-modal .ac-form input[type="email"],
	.ac-modal .ac-form select,
	.ac-modal .ac-form textarea { font-size: 16px; padding: 7px 11px; }
	.ac-modal .ac-form input::placeholder,
	.ac-modal .ac-form textarea::placeholder { font-size: 13px; }
	.ac-modal .ac-form textarea { min-height: 40px; }
	.ac-modal .ac-form .ac-form-submit { margin-top: 0; }
	.ac-modal .ac-form input[type="submit"] { padding: 10px 18px; }
	.ac-modal .ac-form-legal { margin-top: 8px; font-size: .76rem; text-align: center; }
}

/* A handset turned sideways. Roughly 740x400, which cannot hold seven fields,
   a heading and a button whatever is done to them — and the keyboard takes
   half of what is left the moment a field is tapped. The sheet is the honest
   answer: it scrolls, but it scrolls the way a phone sheet is expected to,
   from the edge the thumb is already on. */
@media (max-height: 620px) and (max-width: 900px) {
	.ac-modal { padding: 0; place-items: end center; }
	.ac-modal__panel {
		max-height: 96vh;
		max-height: 96dvh;
		padding: 34px 22px calc(12px + env(safe-area-inset-bottom, 0px));
		border-radius: 18px 18px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-modal.is-open,
	.ac-modal.is-open .ac-modal__panel { animation: none; }
	.ac-fabs { transition: none; }
}