/*
Theme Name: ART CENTRRAL Child
Theme URI: https://artcentrral.com
Description: Production child theme for ART CENTRRAL — signage, branding and printing in Wagholi, Pune. Built on Hello Elementor; layout is authored in Elementor, this stylesheet only carries what Elementor cannot express natively.
Author: ART CENTRRAL
Author URI: https://artcentrral.com
Template: hello-elementor
Version: 2.0.0
Text Domain: artcentrral-child
*/

/* ==========================================================================
   DESIGN SYSTEM — "Studio Light"
   Editorial premium: white canvas, oversized Manrope display type, thin rules,
   one signal-orange accent.

   Colour and type live in Elementor's Global Colors / Global Fonts so they can
   be changed in the UI. The custom properties below mirror those globals for
   the handful of components written here.
   ========================================================================== */

:root {
	/*
	 * #D04620, was #E4572E. One shade deeper, and the reason is contrast.
	 *
	 * White on #E4572E measures 3.68:1, and the same orange as text on white
	 * measures 3.68:1 — both under the 4.5:1 that normal text needs. That is
	 * every primary button on the site, every eyebrow label, every "Learn
	 * more". #D04620 is the lightest orange that clears the bar at 4.59:1, so
	 * this is the smallest change that fixes it: the same hue, a step down in
	 * lightness, and nothing about the brand reads differently.
	 *
	 * The bright original is kept below for the two places that are decoration
	 * rather than information and want the extra life.
	 */
	--ac-primary:   #D04620;
	--ac-primary-d: #B23A19;
	--ac-primary-bright: #E4572E;
	--ac-dark:      #101112;
	--ac-ink:       #24262A;
	--ac-text:      #4B5058;
	/*
	 * #6B717A, was #868C95.
	 *
	 * The old grey measured 3.39:1 on white and 3.16:1 on the light surface —
	 * under the 4.5:1 that normal text needs, and it is used for exactly the
	 * text most likely to be read in bad light: the small contact labels, the
	 * notes under sections, the reviewer credits. This one clears 4.9 on white
	 * and 4.6 on the light surface and still reads as the quieter voice.
	 */
	--ac-muted:     #6B717A;
	--ac-light:     #F7F7F5;
	--ac-light-2:   #EFEFEA;
	--ac-border:    #E4E4DE;
	--ac-wa:        #1FA855;

	--ac-radius:    4px;
	--ac-radius-lg: 8px;
	--ac-ease:      cubic-bezier(.22, .61, .36, 1);
	--ac-shadow-sm: 0 1px 2px rgba(16,17,18,.05), 0 6px 18px rgba(16,17,18,.05);
	--ac-shadow-md: 0 18px 44px rgba(16,17,18,.11);
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { height: auto; }

:focus-visible {
	outline: 2px solid var(--ac-primary);
	outline-offset: 3px;
}

/*
 * The skip link is written out in full here rather than leaning on
 * .screen-reader-text.
 *
 * It carried that class as well, and whichever stylesheet defines it was
 * winning: the link stayed clipped to a 1px box and stayed at top: -60px even
 * while focused, with dark text on a dark ground. So the first thing a
 * keyboard user hit was an invisible control that appeared to do nothing.
 * Every property it needs is stated here, at a specificity nothing else on the
 * page reaches, and the clip is explicitly released on focus.
 */
.ac-skip-link,
a.ac-skip-link.screen-reader-text {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 9999;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--ac-dark);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--ac-radius);
	transition: top .2s ease;
}
.ac-skip-link:focus,
a.ac-skip-link.screen-reader-text:focus {
	top: 12px;
	color: #fff;
	outline: 2px solid var(--ac-primary);
	outline-offset: 3px;
}

/* The landmark takes focus from the skip link, and should not draw a ring for
   it — the visitor asked to be moved here, they do not need telling twice. */
.site-main:focus { outline: none; }

/* Hello Elementor still prints its wrappers when HFE supplies the header. */
.site-header:empty,
.site-footer:empty { display: none; }

/* ==========================================================================
   TYPE HELPERS — applied via Elementor's "CSS Classes" field
   ========================================================================== */

/* Small tracked-out label above a heading, with a rule to its left.
   The type has to be set here: as a <div> heading Elementor gives it no size
   or case of its own, so these were rendering as ordinary sentence-case text
   ("Why ART CENTRRAL") instead of the tracked caps the design uses. */
.ac-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ac-font-body, "Inter", sans-serif);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.4;
	text-transform: uppercase;
}
.ac-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 30px;
	height: 1.5px;
	background: currentColor;
}
.ac-eyebrow--center .elementor-heading-title { justify-content: center; }

/* The accented word in a display heading, marked up as <em>. */
.ac-display em {
	font-style: normal;
	color: var(--ac-primary);
	position: relative;
	white-space: nowrap;
}
.ac-display em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .08em;
	height: .06em;
	background: currentColor;
	opacity: .28;
}

.ac-note { font-size: .78rem; color: var(--ac-muted); letter-spacing: .01em; }

/* Bulleted list with a short rule instead of a disc. */
.ac-ticklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ac-ticklist li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: .93rem;
	color: var(--ac-ink);
}
.ac-ticklist li::before {
	content: "";
	flex: none;
	margin-top: .62em;
	width: 14px;
	height: 2px;
	background: var(--ac-primary);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.elementor-button {
	transition: background-color .25s var(--ac-ease), color .25s var(--ac-ease),
	            border-color .25s var(--ac-ease), transform .25s var(--ac-ease),
	            box-shadow .25s var(--ac-ease);
}
.elementor-button:hover { transform: translateY(-2px); }
.elementor-button:active { transform: translateY(0); }

.ac-btn-primary .elementor-button:hover { box-shadow: 0 12px 26px rgba(228,87,46,.28); }
.ac-btn-wa .elementor-button:hover { box-shadow: 0 12px 26px rgba(31,168,85,.26); }
.ac-btn-outline .elementor-button:hover { background-color: var(--ac-dark); color: #fff; }
.ac-btn-light .elementor-button:hover { background-color: var(--ac-light-2); }
.ac-btn-ghost-light .elementor-button:hover { background-color: rgba(255,255,255,.08); border-color: #fff; }

/* Underlined text link with a moving arrow.
   The colour has to be stated. Elementor's kit sets a global button text
   colour of white for the solid CTAs; without this these links inherited it
   and sat invisible on every white section — "Learn more" on each service
   card and "Know more about us" were in the markup but unreadable. */
.ac-link .elementor-button {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ac-dark);
	font-weight: 600;
}
.ac-link .elementor-button:hover,
.ac-link .elementor-button:focus-visible {
	transform: none;
	color: var(--ac-primary);
}

/* On the dark and accent bands the same link flips to white. */
.ac-section--dark .ac-link .elementor-button,
.ac-section--accent .ac-link .elementor-button { color: #fff; }
.ac-section--dark .ac-link .elementor-button:hover,
.ac-section--accent .ac-link .elementor-button:hover { color: rgba(255, 255, 255, .78); }

/*
 * The rule belongs under the label, and it is drawn rather than switched on.
 *
 * It used to be a border-bottom on the whole button, which meant it ran under
 * the label, the gap AND the arrow — a long stroke with a floating arrowhead
 * sitting on it. And the arrow moved by animating the flex gap from 10px to
 * 16px, so every frame of the hover relaid the line out and pushed the arrow
 * along in steps. That reflow is what made it feel cheap.
 *
 * Now: a pseudo-element under the label only, wiping in from the left and back
 * out to the right, and the arrow moves on transform. Neither touches layout,
 * so nothing around the link so much as twitches.
 */
.ac-link .elementor-button-content-wrapper { gap: 9px; align-items: center; }

.ac-link .elementor-button-text { position: relative; }
.ac-link .elementor-button-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .45s var(--ac-ease);
}
.ac-link .elementor-button:hover .elementor-button-text::after,
.ac-link .elementor-button:focus-visible .elementor-button-text::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.ac-link .elementor-button-icon { transition: transform .35s var(--ac-ease); }
.ac-link .elementor-button:hover .elementor-button-icon,
.ac-link .elementor-button:focus-visible .elementor-button-icon { transform: translateX(5px); }

/* Smaller variant, used inside cards. */
.ac-link--sm .elementor-button {
	font-size: .84rem;
	color: var(--ac-primary);
}

@media (prefers-reduced-motion: reduce) {
	.ac-link .elementor-button-text::after,
	.ac-link .elementor-button-icon { transition: none; }
}

/* Full-width CTAs on small screens — easier to hit, no ragged wrapping. */
@media (max-width: 479px) {
	.ac-cta-row .elementor-widget-button,
	.ac-cta-row .elementor-button { width: 100%; }
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.ac-card {
	transition: transform .4s var(--ac-ease), box-shadow .4s var(--ac-ease), border-color .3s var(--ac-ease);
	overflow: hidden;
}
.ac-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--ac-shadow-md);
	border-color: transparent !important;
}
.ac-card .elementor-widget-image img {
	width: 100%;
	transition: transform .55s var(--ac-ease);
}
.ac-card:hover .elementor-widget-image img { transform: scale(1.05); }

/* Highlight tiles sharing one hairline grid. */
.ac-tile { transition: background-color .3s var(--ac-ease); }
.ac-tile:hover { background-color: var(--ac-light); }

/* ==========================================================================
   TICKER — scrolling service strip under the hero
   ========================================================================== */

.ac-ticker {
	overflow: hidden;
	padding: 16px 0;
	background: var(--ac-light);
	border-top: 1px solid var(--ac-border);
	border-bottom: 1px solid var(--ac-border);
}
.ac-ticker__row {
	display: flex;
	gap: 44px;
	width: max-content;
	animation: ac-ticker 46s linear infinite;
}
.ac-ticker__row span {
	display: flex;
	align-items: center;
	gap: 44px;
	white-space: nowrap;
	font-family: var(--e-global-typography-primary-font-family, "Manrope"), sans-serif;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--ac-muted);
}
.ac-ticker__row span::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ac-primary);
}
@keyframes ac-ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   PORTFOLIO FILTER — ac-site.js reads the ac-cat-* classes
   ========================================================================== */

.ac-filter .elementor-button {
	padding: 9px 17px;
	border-radius: 100px;
	font-size: .82rem;
	font-weight: 500;
	background: #fff;
	color: var(--ac-text);
	border: 1px solid var(--ac-border);
}
.ac-filter .elementor-button:hover {
	border-color: var(--ac-dark);
	color: var(--ac-dark);
	transform: none;
}
/* Two selectors, because the class starts on the wrapper and ends up on
   the link. Elementor puts a widget's CSS classes on the outer
   .elementor-widget, so the "All" pill the build marks active was never
   matching this rule and the row loaded with nothing selected. The script
   then toggles is-active on the link itself, which is the second half. */
.ac-filter .elementor-widget.is-active > .elementor-button,
.ac-filter .elementor-widget.is-active .elementor-button,
.ac-filter .elementor-button.is-active {
	background: var(--ac-dark);
	border-color: var(--ac-dark);
	color: #fff;
}

.ac-work-item.is-hidden { display: none !important; }
.ac-work-cap {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ac-primary);
}

/* ==========================================================================
   PROCESS
   ========================================================================== */

.ac-step-no .elementor-heading-title {
	font-family: var(--e-global-typography-primary-font-family, "Manrope"), sans-serif;
	font-weight: 800;
	font-size: 2.5rem;
	letter-spacing: -.05em;
	line-height: 1;
	color: var(--ac-primary);
}

/* ==========================================================================
   REVIEW PLACEHOLDERS — deliberately unfinished until real reviews arrive
   ========================================================================== */

.ac-review-slot {
	border: 1.5px dashed var(--ac-border) !important;
	text-align: center;
}
.ac-pending-tag .elementor-heading-title {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 100px;
	background: var(--ac-light-2);
	color: var(--ac-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Read by a screen reader, never drawn.
   Used for the two section headings that exist to keep the document outline
   honest — the portfolio grid and the FAQ accordion both went from the page's
   h1 straight to a run of h3s, and the opener above each already says in type
   what the heading says. */
.ac-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   CONTACT FORM 7 — Elementor free has no form widget
   ========================================================================== */

.ac-form .wpcf7-form p { margin: 0; }

/*
 * Two columns, and tighter than it was.
 *
 * The form ran past the bottom of a laptop screen, so the send button — the
 * only thing on it that matters — was never visible at the same time as the
 * fields. Name and phone now share a row and every vertical measurement came
 * down a notch or two. Nothing was removed; it just stopped being spaced like
 * a print form.
 */
.ac-form .ac-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 13px;
}
@media (min-width: 520px) {
	.ac-form .ac-form-grid { grid-template-columns: 1fr 1fr; column-gap: 14px; }
	.ac-form .ac-field--wide { grid-column: 1 / -1; }
}

.ac-form .ac-field {
	display: grid;
	gap: 5px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--ac-ink);
	min-width: 0;
}
.ac-form .ac-field__label { display: block; }
.ac-form .ac-field__label em {
	font-style: normal;
	font-weight: 500;
	color: var(--ac-muted);
}
.ac-form .ac-form-submit { margin-top: 2px; }

.ac-form input[type="text"],
.ac-form input[type="tel"],
.ac-form input[type="email"],
.ac-form select,
.ac-form textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius);
	background: #fff;
	font-family: inherit;
	font-size: .92rem;
	color: var(--ac-ink);
	transition: border-color .2s, box-shadow .2s;
}
.ac-form input::placeholder,
.ac-form textarea::placeholder { color: #AAB0B8; }

.ac-form input:focus,
.ac-form select:focus,
.ac-form textarea:focus {
	outline: none;
	border-color: var(--ac-primary);
	box-shadow: 0 0 0 3px rgba(228,87,46,.12);
}
.ac-form textarea { resize: vertical; min-height: 76px; }

/*
 * Inline validation, written by ac-site.js.
 *
 * Red on the field and a line of plain English under it, shown the moment the
 * visitor leaves a field rather than after a round trip to the server. CF7's
 * own tips keep working underneath; these appear first and say the same thing.
 */
.ac-form .ac-field.is-invalid input,
.ac-form .ac-field.is-invalid select,
.ac-form .ac-field.is-invalid textarea {
	border-color: #C6431F;
	background: #FFF8F6;
}
.ac-form .ac-field-error {
	font-size: .76rem;
	font-weight: 500;
	color: #C6431F;
	display: flex;
	align-items: center;
	gap: 5px;
}
.ac-form .ac-field-error::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	border-radius: 50%;
	background: #C6431F;
	/* A white exclamation mark punched out of the dot, so the message reads as
	   a warning at a glance without loading an icon font for one character. */
	-webkit-mask: radial-gradient(circle at 50% 78%, #000 0 1.1px, transparent 1.1px), linear-gradient(#000 0 0) 50% 30%/1.7px 4.6px no-repeat;
	mask: radial-gradient(circle at 50% 78%, #000 0 1.1px, transparent 1.1px), linear-gradient(#000 0 0) 50% 30%/1.7px 4.6px no-repeat;
	-webkit-mask-composite: source-over;
	mask-composite: add;
}

.ac-form .wpcf7-submit {
	width: 100%;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--ac-radius);
	background: var(--ac-primary);
	color: #fff;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .25s var(--ac-ease), box-shadow .25s var(--ac-ease), transform .25s var(--ac-ease);
}
.ac-form .wpcf7-submit:hover {
	background: var(--ac-primary-d);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(228,87,46,.28);
}
.ac-form .wpcf7-spinner { margin: 8px auto 0; display: block; }

/* Honeypot — off-screen for people, reachable by bots. */
.ac-hp { position: absolute !important; left: -9999px !important; }

.ac-form .wpcf7-response-output {
	margin: 4px 0 0 !important;
	padding: 12px 14px !important;
	border-width: 1px !important;
	border-radius: var(--ac-radius);
	font-size: .84rem;
}
.ac-form .wpcf7-not-valid-tip { font-size: .76rem; color: #C6431F; margin-top: 4px; }
.ac-form .wpcf7-form.invalid .wpcf7-response-output { border-color: #C6431F !important; }
.ac-form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--ac-wa) !important; }

.ac-form-legal { font-size: .8rem; color: var(--ac-muted); text-align: center; }
.ac-form-legal a { color: var(--ac-primary); font-weight: 600; }

/* ==========================================================================
   CONTACT DETAILS
   ========================================================================== */

.ac-contact-list { display: grid; gap: 22px; }
.ac-contact-list > div { display: grid; gap: 5px; }

.ac-contact-label {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ac-muted);
}

.ac-contact-list a,
.ac-contact-list address,
.ac-contact-list span:not(.ac-contact-label) {
	font-style: normal;
	font-size: .98rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--ac-ink);
}
.ac-contact-list a:hover { color: var(--ac-primary); }

/* The enquiry form sits on a white card against the light section. */
.ac-form-card {
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	box-shadow: var(--ac-shadow-sm);
}
.e-con.ac-form-card {
	--padding-top: clamp(24px, 2.6vw, 40px);
	--padding-bottom: clamp(24px, 2.6vw, 40px);
	--padding-left: clamp(24px, 2.6vw, 40px);
	--padding-right: clamp(24px, 2.6vw, 40px);
	--row-gap: 18px;
	--column-gap: 18px;
	gap: 18px;
}

/* ==========================================================================
   MAP
   ========================================================================== */

.ac-map iframe {
	width: 100%;
	min-height: 280px;
	border: 0;
	display: block;
	filter: grayscale(1) contrast(1.05);
	transition: filter .4s var(--ac-ease);
}
.ac-map:hover iframe { filter: none; }

/* ==========================================================================
   HEADER / FOOTER polish on top of the HFE templates
   ========================================================================== */

.ac-header {
	transition: box-shadow .3s var(--ac-ease), border-color .3s var(--ac-ease);
	border-bottom: 1px solid transparent;
}
.ac-header.ac-stuck {
	border-bottom-color: var(--ac-border);
	box-shadow: 0 2px 20px rgba(16,17,18,.05);
}

/* Nav underline that grows from the left. */
.ac-nav .elementor-nav-menu--main .elementor-item::after,
.ac-nav .elementor-nav-menu--main .elementor-item::before { display: none; }
.ac-nav .elementor-nav-menu--main .elementor-item {
	position: relative;
	padding-inline: 0 !important;
	margin-inline: 15px;
}
.ac-nav .elementor-nav-menu--main .elementor-item .ac-underline { display: none; }
.ac-nav .elementor-nav-menu--main li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	height: 1.5px;
	width: 0;
	background: var(--ac-primary);
	transition: width .28s var(--ac-ease);
	display: block !important;
}
.ac-nav .elementor-nav-menu--main li > a:hover::after,
.ac-nav .elementor-nav-menu--main li.current-menu-item > a::after { width: 100%; }

.ac-footer-links a { transition: color .2s, padding-left .25s var(--ac-ease); }
.ac-footer-links a:hover { padding-left: 4px; }

.ac-social .elementor-social-icon {
	border-radius: var(--ac-radius) !important;
	transition: background-color .25s var(--ac-ease), color .25s var(--ac-ease);
}

/* ==========================================================================
   FLOATING CONTACT BUTTONS
   ==========================================================================
   Call above WhatsApp, right-aligned so both grow leftwards on hover without
   the lower one shifting. Two buttons rather than one because they are the
   same decision at two speeds: WhatsApp for a photograph and a question, the
   phone for someone who wants an answer now. */

.ac-fabs {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/*
 * The colour is written at .ac-fabs a.ac-fab, not .ac-fab, and that is not
 * belt-and-braces.
 *
 * The Elementor kit sets `.elementor-kit-5 a { color: #24262A }` and
 * `a:hover { color: #D04620 }` for every link on the site, and both outrank a
 * plain class. So these buttons drew their icons in ink on orange at rest, and
 * on hover the label turned brand orange — which on the orange call button
 * meant a wide empty pill with invisible text in it.
 */
.ac-fabs a.ac-fab {
	display: inline-flex;
	align-items: center;
	/*
	 * flex-start, and no flex gap.
	 *
	 * Centring overflowing flex content clips it at both ends, so with the
	 * label still taking its natural width the icon was pushed out of the left
	 * of the circle — the orange button showed a white sliver on its edge and
	 * the green one showed nothing at all. The icon is pinned to the padding
	 * edge instead, and the space before the label is the label's own margin
	 * so that it collapses with it.
	 */
	justify-content: flex-start;
	width: auto;
	max-width: 56px;      /* 15 + 26 icon + 15 = a circle at rest */
	height: 56px;
	padding: 0 15px;
	border-radius: 100px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	transition:
		max-width .38s var(--ac-ease),
		transform .28s var(--ac-ease),
		box-shadow .28s var(--ac-ease);
}
.ac-fabs a.ac-fab:hover,
.ac-fabs a.ac-fab:focus,
.ac-fabs a.ac-fab:focus-visible { color: #fff; }
.ac-fabs a.ac-fab svg { flex: none; }

.ac-fabs a.ac-fab--wa   { background: var(--ac-wa); box-shadow: 0 8px 22px rgba(31, 168, 85, .34); }
.ac-fabs a.ac-fab--call { background: var(--ac-primary); box-shadow: 0 8px 22px rgba(208, 70, 32, .34); }

.ac-fab__label {
	font-size: .88rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	transition:
		max-width .38s var(--ac-ease),
		margin-left .38s var(--ac-ease),
		opacity .22s var(--ac-ease);
}

/*
 * max-width, not width. The two labels are different lengths, and a single
 * hard width either cut "WhatsApp" off or left "Call us" sitting in a pool of
 * dead colour. Growing a max-width lets each button stop at its own content.
 */
@media (hover: hover) {
	.ac-fabs a.ac-fab:hover,
	.ac-fabs a.ac-fab:focus-visible {
		max-width: 240px;
		transform: translateY(-2px);
	}
	.ac-fabs a.ac-fab--wa:hover,
	.ac-fabs a.ac-fab--wa:focus-visible { box-shadow: 0 12px 30px rgba(31, 168, 85, .45); }
	.ac-fabs a.ac-fab--call:hover,
	.ac-fabs a.ac-fab--call:focus-visible { box-shadow: 0 12px 30px rgba(208, 70, 32, .45); }

	.ac-fabs a.ac-fab:hover .ac-fab__label,
	.ac-fabs a.ac-fab:focus-visible .ac-fab__label {
		max-width: 160px;
		margin-left: 10px;
		opacity: 1;
	}
}

@media (max-width: 640px) {
	.ac-fabs { right: 14px; bottom: 14px; gap: 10px; }
	/* Two stacked buttons at full size reach too far up a short screen. */
	.ac-fabs a.ac-fab { max-width: 50px; height: 50px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ac-fabs a.ac-fab { transition: none; }
	.ac-fabs a.ac-fab:hover { transform: none; }
}

/* ==========================================================================
   404
   ========================================================================== */

.ac-404 { text-align: center; padding: clamp(70px, 10vw, 150px) 20px; }
.ac-404__code {
	font-family: var(--e-global-typography-primary-font-family, "Manrope"), sans-serif;
	font-size: clamp(4rem, 14vw, 9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	color: var(--ac-primary);
}
.ac-404 h1 { margin: 18px 0 12px; }
.ac-404 p { color: var(--ac-muted); max-width: 46ch; margin: 0 auto 30px; }
.ac-404__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ac-404__links a {
	padding: 14px 26px;
	border-radius: var(--ac-radius);
	font-size: .9rem;
	font-weight: 600;
	transition: all .25s var(--ac-ease);
}
.ac-404__links a:first-child { background: var(--ac-primary); color: #fff; }
.ac-404__links a:first-child:hover { background: var(--ac-primary-d); }
.ac-404__links a + a { border: 1.5px solid var(--ac-dark); color: var(--ac-dark); }
.ac-404__links a + a:hover { background: var(--ac-dark); color: #fff; }
.ac-404__meta { margin-top: 26px; font-size: .85rem; }
.ac-404__meta a { color: var(--ac-primary); font-weight: 600; }

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ac-ticker__row { animation: none; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}