/**
Theme Name: Astra Child
Author: TalbotIQ
Description: Child theme of Astra for the TalbotIQ website. Layout and content are built in Elementor; this file holds only small, commented CSS fixes.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ---------------------------------------------------------------------------
   HEADING FONT. MESHED Display (bold), the source site's heading face. The file
   in fonts/ is copied unchanged from the source (assets/fonts), with its licence
   beside it: free for personal and commercial use; the font file must not be
   modified. This rule is the source's own. Every heading style in Elementor >
   Site Settings > Global Fonts that names "Meshed Display" uses it.
   --------------------------------------------------------------------------- */
@font-face {
	font-family: "Meshed Display";
	src: url("fonts/MeshedDisplay-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   KEYWORD COLOURS. One or two words in a heading carry a colour, as on the
   source site. Use them inside any Heading widget's title, e.g.
     Every <span class="tq-key-g">workflow</span>
   Colours come from the Astra palette (Customize > Global > Colors), so they
   follow any palette change:
     tq-key-g = palette 1 "Alternate Brand" (green)
     tq-key-y = custom colour "Gold text" (the readable form of brand yellow)
   --------------------------------------------------------------------------- */
.tq-key-g { color: var(--ast-global-color-1); }
.tq-key-y { color: var(--ast-global-color-9); }

/* On a dark section (add the CSS class "tq-dark" to the section container in
   Elementor > Advanced) the pair switches to the bright brand teal and yellow,
   because the light-ground values do not read on near-black. */
.tq-dark .tq-key-g { color: var(--ast-global-color-0); }
.tq-dark .tq-key-y { color: var(--ast-global-color-8); }

/* ---------------------------------------------------------------------------
   BRUSH MARKS. A marker stroke painted behind one word of the hero heading:
     <span class="tq-brush">workflow</span>  (teal)
     <span class="tq-brush-y">intelligence</span>  (yellow)
   The two strokes are artwork copied unchanged from the source site's
   stylesheet, so - like the logo - their teal and yellow are drawn into the
   image and do not follow palette changes. Sizes are in em, so the stroke
   scales with the heading at every screen size. No animation.
   --------------------------------------------------------------------------- */
.tq-brush,
.tq-brush-y {
	color: var(--ast-global-color-2);
	background-repeat: no-repeat;
	/* the source's value: the stroke runs from cap height to just under the
	   baseline of Meshed Display (a taller font would need a larger offset) */
	background-position: 0 .02em;
	background-size: 100% .80em;
	/* the stroke overshoots the word slightly at both ends; the negative margin
	   gives the space back so nothing after the word moves */
	padding: 0 .06em;
	margin: 0 -.06em;
}
.tq-brush {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0.9 4.4C22 2.1 58 1.3 99.1 2.2L98.6 19.6C71 21.9 34 22.5 1.5 21.4Z' fill='%2302A885'/%3E%3Cpath d='M3.6 14.9C29 13.1 63 13.4 97.4 14.2L97.1 19.7C70 21.8 34 22.4 2.9 21.2Z' fill='%23017A61' opacity='.45'/%3E%3C/svg%3E");
}
.tq-brush-y {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M99.1 4.4C78 2.1 42 1.3 0.9 2.2L1.4 19.6C29 21.9 66 22.5 98.5 21.4Z' fill='%23F3E202'/%3E%3Cpath d='M96.4 14.9C71 13.1 37 13.4 2.6 14.2L2.9 19.7C30 21.8 66 22.4 97.1 21.2Z' fill='%23C9A800' opacity='.4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   STICKY HEADER. The source header stays pinned to the top while the page
   scrolls. Astra's free version has no sticky-header setting, so this rule
   does it. The offsets keep it below the WordPress admin bar, which only
   logged-in editors see.
   --------------------------------------------------------------------------- */
#masthead { position: sticky; top: 0; z-index: 99; }
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar #masthead { top: 0; } }

/* ---------------------------------------------------------------------------
   "SOON" MENU ITEMS. A page that does not exist yet is shown as plain text
   with a small grey "soon" tag, as on the source, instead of a broken link.
   In Appearance > Menus: add a Custom Link with an EMPTY URL and give it the
   CSS class "tq-soon" (Screen Options > CSS Classes).
   --------------------------------------------------------------------------- */
.main-header-menu .menu-item.tq-soon > .menu-link,
.main-header-menu .menu-item.tq-soon:hover > .menu-link { color: var(--ast-global-color-2); cursor: default; }
.main-header-menu .menu-item.tq-soon > .menu-link::after {
	content: "soon";
	margin-left: 7px;
	font-size: 10.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ast-global-color-15);
	vertical-align: 1.5px;
}

/* ---------------------------------------------------------------------------
   FOOTER (Appearance > Customize > Footer Builder). Colours, sizes and
   spacing are Astra settings; these rules add only what Astra has no
   setting for:
   - column headings letter-spaced, with a 2px rule in the heading's own colour
   - link lists without bullets, one link per line (as on the source)
   - the grey "soon" tag, and teal for a link made bold ("Book a demo")
   - 3 columns on tablets and 2 on phones, as on the source (Astra offers
     only 5 columns or 1 for a five-column row)
   The logo (HTML 1) and "Get in touch" (HTML 2) are written in those elements'
   visual editor: an image, a Heading 2, a bulleted list and links, no classes.
   --------------------------------------------------------------------------- */
.site-footer .widget-title,
.site-footer .ast-builder-html-element h2 {
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	line-height: 1.65;
	margin: 0 0 16px;
	padding-bottom: 9px;
	border-bottom: 2px solid currentColor;
}
.site-footer .widget_nav_menu ul,
.site-footer .ast-builder-html-element ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget_nav_menu li,
.site-footer .ast-builder-html-element li { margin: 0; }
.site-footer .widget_nav_menu a,
.site-footer .ast-builder-html-element li a { display: block; padding: 5px 0; font-size: 15px; line-height: 1.65; text-decoration: none; }
.site-footer .tq-soon > a::after {
	content: "soon";
	margin-left: 7px;
	font-size: 10.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ast-global-color-15);
	vertical-align: 1.5px;
}
/* A bold link is teal ("Book a demo"), whether the bold sits inside the link or around it. The link
   itself takes the colour, so its keyboard focus ring (dotted, in the link's colour) stays teal too. */
#colophon .ast-builder-html-element a:has(strong),
#colophon .ast-builder-html-element strong a { color: var(--ast-global-color-17); font-weight: 600; }
#colophon .ast-builder-html-element a strong { font-weight: inherit; }
/* and white under the pointer, like every footer link (.fcol a:hover) */
#colophon .ast-builder-html-element a:has(strong):hover,
#colophon .ast-builder-html-element strong a:hover { color: var(--ast-global-color-4); }
#colophon .site-primary-footer-wrap .ast-builder-grid-row { gap: 36px; }
/* Astra puts 10px under each footer section once the rows stack (phones);
   the source has no such gap, so the rows keep the spacing set in the builder */
#colophon .site-footer-section { margin-bottom: 0; }
/* the source's five columns are not equal: Products is the widest, Resources the narrowest */
@media (min-width: 1081px) {
	#colophon .site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: 1.15fr 1fr 1fr .9fr 1.05fr; }
}
@media (max-width: 1080px) {
	#colophon .site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	#colophon .site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The source footer's side margin drops from 32px to 22px at 820px. Astra's phone setting (22px) only
   starts at 544px, so screens 545 to 820px wide get the 22px here. */
@media (min-width: 545px) and (max-width: 820px) {
	#colophon .site-above-footer-wrap,
	#colophon .site-primary-footer-wrap,
	#colophon .site-below-footer-wrap { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 460px) {
	#colophon .site-primary-footer-wrap .ast-builder-grid-row { gap: 24px; }
}
/* Astra puts 10px under each footer column on phones; on the source the columns are spaced by the grid gap alone. */
#colophon .site-primary-footer-wrap .site-footer-section { margin-bottom: 0; }
/* Headings are h2 tags, so they would pick up the display font; the source sets them in the text face. */
.site-footer .widget-title,
.site-footer .ast-builder-html-element h2 { font-family: inherit; }
/* The "Get in touch" heading (HTML 2) takes that element's text colour setting, like the other headings. */
.site-footer .ast-builder-html-element h2 { color: inherit; }
/* The source footer's content is 1136px wide; the header's is 1256px. Astra uses one content
   width for both, so the footer rows are narrowed here. */
#colophon .ast-builder-grid-row { max-width: 1136px; }
/* Astra lets a footer word break wherever it meets its column's edge (overflow-wrap: anywhere). The
   source has no such rule, so on the narrowest phones (about 340px and below) the email address and
   a name with its "soon" tag stay on one line and run on past the column, as they do there. */
#colophon .ast-builder-grid-row { overflow-wrap: normal; }
/* The rule above the copyright line spans the content width, not the whole screen. Its colour is
   still the Footer Builder's "Below Footer > Top Border" setting; these lines only move where it
   is drawn, and give it the source's 24px gap above the text. */
#colophon .site-below-footer-wrap { border-top-style: none; }
#colophon .site-below-footer-wrap > .ast-builder-grid-row-container-inner,
#colophon .site-below-footer-inner-wrap { border-top-color: inherit; }
#colophon .site-below-footer-inner-wrap { border-top-style: solid; border-top-width: 1px; padding-top: 24px; }

/* ---------------------------------------------------------------------------
   MENU CARET. The source marks a dropdown with a small, light triangle (▼),
   4px after the word, instead of Astra's chevron icon.
   --------------------------------------------------------------------------- */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle { margin-left: 4px; padding: 0; }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle .ast-icon { display: none; }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle::after {
	content: "\25BC";
	font-size: 10px;
	opacity: .55;
	vertical-align: 1px;
}

/* DROPDOWN ITEMS. Astra's menu spacing setting is shared by the top bar and
   the dropdowns, and the bar needs 0 vertical padding; this gives the
   dropdown rows their own breathing room (the source panel's 11px rows). The
   "All products / All solutions" rows take the source panel's green link style. */
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link { padding: 9px 18px; line-height: 1.45; }
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:first-child > .menu-link { padding-top: 12px; }
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:last-child > .menu-link { padding-bottom: 12px; }
.main-header-menu .menu-item.tq-menu-all > .menu-link { color: var(--ast-global-color-1); font-weight: 600; }

/* ---------------------------------------------------------------------------
   PAGE HELPERS. Small things Elementor has no setting for. Each one is
   switched on by typing its class into a widget's or container's
   Advanced > CSS Classes box; nothing here applies on its own.
   --------------------------------------------------------------------------- */

/* tq-lede (Text Editor): words made bold at the start of a lede are set in
   ink at semibold, while the rest of the sentence keeps the block's grey. */
.tq-lede strong { color: var(--ast-global-color-2); font-weight: 600; }

/* tq-on-teal (a section with a teal ground): a gold or green keyword in a
   heading turns ink, as on the source's closing band. */
.tq-on-teal .tq-key-y,
.tq-on-teal .tq-key-g { color: var(--ast-global-color-2); }

/* tq-clamp-4 (Text Editor, article summaries): the text stops after four
   lines with an ellipsis, and always takes four lines' height, so the
   "Read more" lines of neighbouring cards sit level. */
.tq-clamp-4 p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	min-height: calc(4 * 1.55em);
}

/* tq-play (Video widget): the source's play badge - a 66px teal disc behind
   the white play icon - and a faint darkening toward the bottom of the cover
   picture. The icon itself is the widget's own Play Icon setting (the
   source's triangle, play-triangle.svg). */
.tq-play .elementor-custom-embed-image-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(14 22 32 / .04), rgb(14 22 32 / .22));
}
.tq-play .elementor-custom-embed-play {
	z-index: 1;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--ast-global-color-0);
	box-shadow: 0 6px 20px rgb(14 22 32 / .28);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* The triangle is solid white with the source's faint shadow (Elementor draws
   it at 80% with a heavier one), and it does not spin once pressed: the
   player simply takes its place, as on the source. */
.tq-play .elementor-custom-embed-play svg { opacity: 1; filter: drop-shadow(0 1px 2px rgb(14 22 32 / .35)); transition: none; }
.tq-play .elementor-custom-embed-play.elementor-playing svg { animation: none; }
/* While the pointer is on the video, or a finger presses it on a touch
   screen, the disc grows 7% and turns green and the shading deepens, as on
   the source (the timing is in tq-motion.css). */
.tq-play:hover .elementor-custom-embed-image-overlay::after { background: linear-gradient(180deg, rgb(14 22 32 / .1), rgb(14 22 32 / .3)); }
.tq-play:hover .elementor-custom-embed-play { scale: 1.07; background: var(--ast-global-color-1); }
@media (hover: none) {
	.tq-play:active .elementor-custom-embed-play { scale: 1.07; background: var(--ast-global-color-1); }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
	.tq-play:active .elementor-custom-embed-play { scale: none; }
}

/* tq-play, tq-press (the episode's video and the broadcast still): the
   source's two shadows under each frame, a close one and a wide one
   (.tlfeat-media). Elementor's shadow setting takes only one. */
.elementor-widget-video.tq-play,
.e-con.tq-press { box-shadow: 0 1px 2px rgb(31 36 48 / .06), 0 14px 36px rgb(31 36 48 / .1); }

/* tq-press (Container, the broadcast still that links out) and tq-play-disc
   (Icon, its disc): the same shading, disc and triangle as the episode's,
   which stay still under the pointer, as on the source. */
.tq-press::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(14 22 32 / .04), rgb(14 22 32 / .22));
	pointer-events: none;
}
.tq-play-disc .elementor-icon { box-shadow: 0 6px 20px rgb(14 22 32 / .28); }
.tq-play-disc .elementor-icon svg { filter: drop-shadow(0 1px 2px rgb(14 22 32 / .35)); }

/* tq-out (Heading, the link out under the broadcast: "Watch on LinkedIn"):
   the source underlines the link itself, so the rule sits just under the
   letters and takes no room in the layout; under the pointer it turns the
   link's own green, at once. */
.tq-out .elementor-heading-title a { border-bottom: 1px solid rgb(2 122 92 / .3); }
.tq-out .elementor-heading-title a:hover { border-bottom-color: currentColor; }

/* tq-pill-toggle (Nested Accordion, "3 modes"): the title shrinks to a pill
   centred under the tile instead of spanning the tile's width. Its chevron
   is the source's (modes-chevron.svg), one chevron turned over while the
   panel is open (the widget's "active" icon is not shown). */
.tq-pill-toggle .e-n-accordion-item-title { width: fit-content; margin-inline: auto; }
.elementor-widget-n-accordion.tq-pill-toggle .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened { display: none; }
.elementor-widget-n-accordion.tq-pill-toggle .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed { display: flex; transform: rotate(180deg); }

/* tq-link-toggle (Nested Accordion, "View all thought leadership" under the
   article cards) and tq-rest (the five cards it shows): the source's text
   button. Its title is an inline box on a 17px / 1.65 text line, as the
   source's button is inside .allp--blog, so the line keeps that height. The
   five cards stay out of the grid until it is open, then join it above the
   button. Its two labels (tq-lbl-more, tq-lbl-less) show by state, and under
   the pointer the label underlines at once. */
.elementor-widget-n-accordion.tq-link-toggle .e-n-accordion-item { display: block; font-size: 17px; line-height: 1.65; }
.elementor-widget-n-accordion.tq-link-toggle .e-n-accordion-item-title { display: inline-flex; vertical-align: baseline; }
.tq-link-toggle .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { text-decoration: underline; }
.tq-link-toggle .tq-lbl-less,
.tq-link-toggle .e-n-accordion-item[open] .tq-lbl-more { display: none; }
.tq-link-toggle .e-n-accordion-item[open] .tq-lbl-less { display: inline; }
.tq-blog .e-con.tq-rest { display: none; }
.e-con:has(.tq-link-toggle .e-n-accordion-item[open]) .tq-blog .e-con.tq-rest { display: var(--display); }

/* tq-nm (product tile names, typed as two <span class="tq-nm"> halves): on
   narrow phones each name breaks onto two lines at the same place as the
   source ("Sales / CRM"). Wider screens wrap the name normally. */
@media (max-width: 460px) { .tq-nm { display: block; } }

/* tq-169 (Image widget): the picture is shown at 16:9, cropped from the
   centre, whatever its own proportions (two of the three "Why" photos are 3:2). */
.tq-169 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* HOMEPAGE BETWEEN PHONE AND TABLET. Elementor's phone layout starts at 820px;
   the source's homepage takes two more steps below that, copied here.
   tq-hero-h1 (Heading, the main heading): 44px on screens 461 to 820px wide.
   The phone size in the global font (36px) is the source's below 461px only.
   tq-tiles (Container, the product tiles): 30px between rows and 18px between
   columns on screens 461 to 820px wide. The phone gaps in the builder (26px,
   16px) are the source's below 461px only.
   tq-blog (Container, the article cards): two to a row from 640px to 820px,
   one below 640px, as on the source. Also three to a row at exactly 1080px:
   the source's two-to-a-row step stops at 1079px, Elementor's tablet layout
   (which holds the two) runs to 1080px.
   tq-nameband (Container around a product tile's name): on screens 461 to
   820px wide the name stays inside the tile's side padding; the full tile
   width in the builder is the source's below 461px only. On phones 416 to
   460px wide every name is exactly two lines, so the band holds two lines;
   narrower phones keep the three set in the builder.
   tq-stages (Container, the four steps in the dark band): one column on
   phones narrower than 380px, 26px apart. */
@media (min-width: 461px) and (max-width: 820px) {
	.elementor .elementor-element.tq-hero-h1 h1.elementor-heading-title { font-size: 44px; }
	.elementor .elementor-element.e-con.tq-tiles { --gap: 30px 18px; --row-gap: 30px; --column-gap: 18px; }
	.elementor .elementor-element.e-con.tq-nameband { --margin-left: 0px; --margin-right: 0px; --width: 100%; }
}
@media (min-width: 640px) and (max-width: 820px) {
	.elementor .elementor-element.e-con.tq-blog { --e-con-grid-template-columns: repeat(2, 1fr); --gap: 44px 36px; --row-gap: 44px; --column-gap: 36px; }
}
@media (min-width: 1080px) and (max-width: 1080px) {
	.elementor .elementor-element.e-con.tq-blog { --e-con-grid-template-columns: repeat(3, 1fr); --gap: 48px 56px; --row-gap: 48px; --column-gap: 56px; }
}
@media (min-width: 416px) and (max-width: 460px) {
	.elementor .elementor-element.e-con.tq-nameband { --min-height: 40.8px; }
}
@media (max-width: 379px) {
	.elementor .elementor-element.e-con.tq-stages { --e-con-grid-template-columns: 1fr; --gap: 26px; --row-gap: 26px; --column-gap: 26px; }
}

/* HOMEPAGE AT 900PX AND THE STEPS BELOW IT. The source takes these at its own
   widths, inside Elementor's tablet layout (821 to 1080px) and phone layout
   (820px down), so the builder holds the value on each side of the step and
   these rules carry the step itself. From 900px down:
   tq-note-phone / tq-note-desk (Containers, the hand note in the hero): the
   note sits under the buttons, as on phones, at its phone size.
   tq-feat (Container, each featured episode): the video above the words, 26px
   apart and top-aligned; the first title at 30px (the second keeps 27px).
   tq-eco (Container, the ecosystem band): its margin is 20px a side, not
   40px; tq-stages go two by two, 34px between rows and 20px between columns,
   and tq-rail (the line through the four nodes) goes; tq-ecowell (Image, the
   diagram) keeps at least 720px and is swiped sideways when the band is
   narrower, with 10px under it for the scrollbar. Below 900px tq-ecoeyeb (the
   eyebrow) is back at 12.5px with 14px under it.
   Then 720px and below: the band's padding is 28px less top and bottom; 700px
   and below: the ticks under the stages (tq-tick) shorten; 560px and below:
   the closing line (tq-ecotag) closes up its letter spacing to .18em; 520px
   and below: the diagram fits the screen edge to edge. Elementor's phone
   values are the smallest of these, so from 521 to 820px the rules put back
   the larger ones. */
@media (min-width: 821px) and (max-width: 900px) {
	.elementor .elementor-element.e-con.tq-note-desk { display: none; }
	.elementor .elementor-element.e-con.tq-note-phone { display: var(--display); --width: max-content; --e-global-typography-tqnote-font-size: 20px; }
	.elementor .elementor-element.e-con.tq-feat { --e-con-grid-template-columns: 1fr; --gap: 26px 26px; --row-gap: 26px; --column-gap: 26px; --align-items: start; --e-global-typography-tqfeat-font-size: 30px; }
	.elementor .elementor-element.e-con.tq-eco { --content-width: min(1496px, 100% - 40px); }
	.elementor .elementor-element.e-con.tq-stages { --e-con-grid-template-columns: repeat(2, 1fr); --gap: 34px 20px; --row-gap: 34px; --column-gap: 20px; }
	.elementor .elementor-element.e-con.tq-rail { display: none; }
}
@media (min-width: 821px) and (max-width: 899px) {
	.elementor .elementor-element.elementor-widget.tq-ecoeyeb { --e-global-typography-tqeyeb-font-size: 12.5px; margin-bottom: calc(var(--kit-widget-spacing, 0px) + 14px); }
}
@media (min-width: 521px) and (max-width: 900px) {
	.elementor .elementor-element.elementor-widget.tq-ecowell { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
	.elementor .elementor-element.elementor-widget.tq-ecowell img { min-width: 720px; }
	.tq-ecowell::-webkit-scrollbar { height: 5px; }
	.tq-ecowell::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .22); border-radius: 3px; }
}
@media (min-width: 521px) and (max-width: 820px) {
	.elementor .elementor-element.e-con.tq-eco { --content-width: min(1496px, 100% - 40px); }
	/* its width given outright: below 768px Elementor lets the band's column
	   wrap, and a wrapping column grows to the 720px figure */
	.elementor .elementor-element.elementor-widget.tq-ecowell { width: calc(100% - 44px); margin-inline: 22px; --e-transform-translateX: 0px; --e-transform-scale: 1; }
}
@media (min-width: 561px) and (max-width: 820px) {
	.elementor .elementor-element.elementor-widget.tq-ecotag { --e-global-typography-tqtag-letter-spacing: .3em; }
}
@media (min-width: 701px) and (max-width: 820px) {
	.elementor .elementor-element.e-con.tq-tick { --min-height: 15px; --margin-bottom: 11px; }
}
@media (min-width: 721px) and (max-width: 820px) {
	.elementor .elementor-element.e-con.tq-eco { --padding-top: 178px; --padding-bottom: 186px; }
}

/* HEADER BUTTON ON PHONES. Astra gives the phone header's left and right
   sections equal halves, which leaves "Get in touch" 112px and breaks it
   onto two lines. The source keeps it on one line, so the button does not
   wrap, and the header's 20px gap between the logo and the button group and
   the 10px before the menu toggle come out to make room for it (otherwise the
   header is 8px wider than a 375px phone). */
.ast-header-button-1 .ast-custom-button { white-space: nowrap; }
#ast-mobile-header .ast-builder-grid-row { grid-column-gap: 0; }
#ast-mobile-header [data-section="section-header-mobile-trigger"] { padding-left: 0; }
/* On the narrowest phones (under about 375px) the logo, the button and the
   menu button no longer fit side by side at full size. The logo gives way and
   shrinks, keeping its proportions, instead of pushing the page sideways (at
   320px it did by 33px). The source's logo shrinks there too. */
#ast-mobile-header .ast-builder-grid-row { grid-template-columns: minmax(0, 1fr) auto; }
#ast-mobile-header .site-header-primary-section-left,
#ast-mobile-header .site-branding,
#ast-mobile-header .ast-site-identity,
#ast-mobile-header .custom-logo-link { min-width: 0; }
#ast-mobile-header .custom-logo { max-width: 100%; height: auto; }

/* tq-tile + tq-badge (product tiles): the small "Live" / "2 modes" tag under
   a tile's description stays invisible, keeping its space, until the pointer
   is on the tile - as on the source (its fade is timed in tq-motion.css). */
.tq-badge { opacity: 0; }
.tq-tile:hover .tq-badge,
.tq-tile:focus-visible .tq-badge { opacity: 1; }

/* tq-tile-card (Container, a tile's white app-icon card): the source's two
   soft shadows, which become a teal glow while the pointer is anywhere on the
   tile, or a finger presses it on a touch screen (where the tile lifts too). */
.e-con.tq-tile-card { box-shadow: 0 4px 14px rgb(31 36 48 / .055), 0 1px 3px rgb(31 36 48 / .05); }
.tq-tile:hover .e-con.tq-tile-card { box-shadow: 0 14px 34px rgb(2 168 133 / .16), 0 2px 6px rgb(31 36 48 / .06); }
@media (hover: none) {
	.tq-tile:active .e-con.tq-tile-card { box-shadow: 0 14px 34px rgb(2 168 133 / .16), 0 2px 6px rgb(31 36 48 / .06); }
	.elementor .tq-cell .tq-tile.e-con.e-transform:active { --e-con-transform-translateY: -6px; }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
	.elementor .tq-cell .tq-tile.e-con.e-transform:active { --e-con-transform-translateY: 0px; }
}

/* tq-cell (Container, a product tile with its "3 modes" pill): above 1080px
   the pill turns solid teal and its chevron turns over while the pointer is
   anywhere on the cell, or the keyboard is in it, as on the source. Below
   that there is nothing to hover with, and the pill changes only once it is
   pressed open. */
@media (min-width: 1081px) {
	.tq-cell.e-con:is(:hover, :focus-within) .tq-pill-toggle.elementor-widget-n-accordion > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
		background-color: var(--ast-global-color-0);
		color: var(--ast-global-color-4);
	}
	.tq-cell.e-con:is(:hover, :focus-within) .tq-pill-toggle .e-n-accordion-item-title-icon .e-closed { transform: rotate(180deg); }
}

/* tq-modes-float (Container, the "3 modes" panel above 1080px, a child of
   its tq-cell): it floats under its tile while the pointer is anywhere on
   the cell or the keyboard is in it, and stays while the pill is pressed
   open, as on the source. Hidden, it is only invisible, so that it can fade
   in and drop into place (timed in tq-motion.css). */
@media (min-width: 1081px) {
	.e-con.tq-modes-float { opacity: 0; visibility: hidden; transform: translateY(-8px); }
	.tq-cell:is(:hover, :focus-within) .e-con.tq-modes-float,
	.tq-cell:has(.tq-pill-toggle .e-n-accordion-item[open]) .e-con.tq-modes-float { opacity: 1; visibility: visible; transform: none; }
}

/* tq-post (Container, an article card): the picture zooms 2% inside its
   rounded frame while the pointer is anywhere on the card, or a finger
   presses it on a touch screen, as on the source. */
.tq-post:hover .elementor-widget-image img { transform: scale(1.02); }
/* ... and its "Read more" (tq-more) underlines, at once */
.tq-post:hover .tq-more .elementor-heading-title { text-decoration: underline; }
@media (hover: none) {
	.tq-post:active .elementor-widget-image img { transform: scale(1.02); }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
	.tq-post:active .elementor-widget-image img { transform: none; }
}

/* ---------------------------------------------------------------------------
   PRODUCT PAGES. Helpers for the product pages' own template, switched on the
   same way (a class in Advanced > CSS Classes).
   --------------------------------------------------------------------------- */

/* tq-key-b (inside a heading, like tq-key-g / tq-key-y): the blue word at the
   end of a product page's hero heading ("argue with"). */
.tq-key-b { color: var(--ast-global-color-11); }

/* tq-crumb (Text Editor, "Products > MCQs"): the link is green and semibold,
   with no underline. */
.tq-crumb a { color: var(--ast-global-color-1); font-weight: 600; text-decoration: none; }
/* on the homepage's stylesheet (the two overview pages) it is underlined under the pointer; the other
   pages' own styles leave it as it is */
html:has(.tq-rm-all) .tq-crumb a:hover { text-decoration: underline; }

/* tq-ink (Text Editor): bold words in ink, keeping their weight. */
.tq-ink strong { color: var(--ast-global-color-2); }

/* tq-note (Text Editor, the plain note under the trust cards): a link in the
   text is green, semibold and underlined, as on the source. */
.tq-note a { color: var(--ast-global-color-1); font-weight: 600; text-decoration: underline; }

/* tq-nowrap: a pill's words stay on one line. */
.tq-nowrap .elementor-heading-title { white-space: nowrap; }

/* tq-sub (inside a mock-up line): the smaller grey second line, spaced to
   its own size as on the source. */
.tq-sub { color: #9B9898; font-size: 11px; line-height: 1.65; }

/* tq-portrait (Container "Portrait", the founder's photo on About): 260px wide
   from 1040px down, as the source's .portrait. It is the container's tablet
   width in Elementor too, but Elementor writes a container's desktop width for
   every screen wider than 820px and can place that rule after the tablet one,
   which then never shows. */
@media (max-width: 1040px) {
	.elementor .elementor-element.e-con.tq-portrait { --width: 260px; }
}

/* tq-ratio-169 (Container): always 16:9, like a video. Used by the dark
   "Demo video goes here" frame (tq-ph), which also gets the source's look for
   the file name, its monospace included. */
.tq-ratio-169 { aspect-ratio: 16 / 9; }
.tq-ph code { background: rgb(255 255 255 / .1); color: #CFD6DE; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* tq-acc (Nested Accordion, features and FAQ): the sign is the source's own
   "+" (Icon > Upload SVG, acc-plus.svg), drawn in the 13.9 x 34.65px box its
   21px character fills, so a one-line question is as tall as the source's row
   (70.64px, plus the 1px rule under it). It sits 16px from the question, as on
   the source; Elementor's own spacing setting does not apply to a full-width
   title, so the gap is set here, and the question keeps the source's line
   length and breaks onto the same lines. */
.elementor-widget-n-accordion.tq-acc { --n-accordion-icon-gap: 0 16px; }
.elementor-widget-n-accordion.tq-acc .e-n-accordion-item-title-icon { flex: none; }
/* An open question keeps the same "+", turned 45 degrees into a "x", as the
   source turns its sign (the turn is timed in tq-motion.css). The widget's
   "active" icon is not shown. */
.elementor-widget-n-accordion.tq-acc .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened { display: none; }
.elementor-widget-n-accordion.tq-acc .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed { display: flex; transform: rotate(45deg); }

/* tq-modecard + tq-rule (the three ways into a video or chat round): while
   the pointer is on a card, or a finger presses it, a short teal rule grows
   out from its middle under the name; on hover the name also turns green and
   the drawing takes a soft teal glow, as on the source (the timings are in
   tq-motion.css). The rule has the source's rounded ends. */
.tq-rule .elementor-divider-separator { border-radius: 1px; transform: scaleX(0); }
.tq-modecard:hover .tq-rule .elementor-divider-separator,
.tq-modecard:active .tq-rule .elementor-divider-separator { transform: scaleX(1); }
/* (as specific as five classes: Elementor sets the name's own colour with four) */
.tq-modecard.e-con:hover .elementor-widget-heading .elementor-heading-title { color: var(--ast-global-color-1); }
.tq-modecard:hover img { filter: drop-shadow(0 8px 18px rgba(2, 168, 133, .34)); }

/* tq-overhang (Image widget with negative margins): the picture keeps its own
   width past the edges of its container, where Elementor holds every widget
   to its container's width. The "3 modes" connector uses it: its dots
   overhang the panel by 4px, as the source's drawing does. */
.e-con > .elementor-widget.tq-overhang,
.elementor-widget.tq-overhang img { max-width: none; }

/* tq-tight (Image widget, small icons): the widget is exactly as tall as its
   picture. Without it a 17px icon sits in a 28px text line and pushes the
   things beside or below it out of place. */
.tq-tight { line-height: 0; }

/* tq-on-dark (Text Editor on a dark band, Business Management System's
   build state): the bold words in the paragraph are white, as on the source. */
.tq-on-dark strong { color: var(--ast-global-color-4); }

/* ===== HUB PAGES (Products, Solutions) ===== */

/* tq-links (Text Editor): links in running text are green and bold with no
   underline until the pointer is on them, as on the source's hub pages. */
.tq-links a { color: var(--ast-global-color-1); font-weight: 600; text-decoration: none; }
.tq-links a:hover { text-decoration: underline; }
/* On a Heading, tq-links is a hub card's "See ... ->" link. The source makes that link a box of its
   own (inline-block), so the pointer anywhere in it, not only on its words, underlines it. */
.elementor-widget-heading.tq-links a { display: inline-block; }

/* tq-dots (Text Editor holding a list, the "in short" box): small teal dots
   instead of bullets. */
.elementor-widget.tq-dots ul { list-style: none; margin: 0; padding: 0; }
.elementor-widget.tq-dots li { position: relative; padding-left: 22px; margin: 8px 0; }
.elementor-widget.tq-dots li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--ast-global-color-0); }

/* tq-cmp (Text Editor holding the formats table on Products): the source's table.cmp. A real table,
   so the browser shares the width between its columns as on the source at every size; never
   narrower than 820px, so on phones it scrolls sideways inside its frame. Astra's own table borders,
   padding and margin are taken off. */
.elementor-widget.tq-cmp table { width: 100%; min-width: 820px; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.elementor-widget.tq-cmp th,
.elementor-widget.tq-cmp td { text-align: left; vertical-align: top; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--ast-global-color-7); color: var(--ast-global-color-3); }
.elementor-widget.tq-cmp thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ast-global-color-14); font-weight: 600; background: var(--ast-global-color-5); }
.elementor-widget.tq-cmp tbody th { color: var(--ast-global-color-2); font-weight: 600; white-space: nowrap; }
.elementor-widget.tq-cmp tbody tr:last-child th,
.elementor-widget.tq-cmp tbody tr:last-child td { border-bottom: 0; }
.elementor-widget.tq-cmp a { color: var(--ast-global-color-1); text-decoration: none; }
.elementor-widget.tq-cmp a:hover { text-decoration: underline; }

/* tq-playdisc (Container, the ring in a "Demo video goes here" frame): 64px
   tall like the source's, and still free to give up height when the frame is
   short (27px on a 390px phone), which a minimum height would not allow. */
.elementor .elementor-element.e-con.tq-playdisc { height: 64px; }

/* tq-pending (Container, a card for something not launched yet): faded, and
   its title (tq-soon-h, Heading) carries a small "soon" label, as on the
   source. The label keeps the page's own line height (1.65 of its 10.5px):
   with the title's 33px it would stand 1.5px above the line and push it down. */
.tq-pending { opacity: .75; }
.tq-soon-h .elementor-heading-title::after { content: "soon"; margin-left: 7px; font-size: 10.5px; line-height: 1.65; letter-spacing: .07em; text-transform: uppercase; color: var(--ast-global-color-15); vertical-align: 1.5px; }

/* ===== SOLUTION PAGES ===== */

/* tq-green (Text Editor, a phase card's "You leave with:" line on AI Strategy
   & Consulting): the bold words are green and semibold, as on the source. */
.tq-green strong { color: var(--ast-global-color-1); font-weight: 600; }

/* ===== COMPANY PAGES ===== */
/* tq-num (Heading, About's numbers strip): the "+" of "25+" and the "day" of "1 day" are smaller,
   as on the source. */
.tq-num small { font-size: 22px; font-weight: 600; line-height: 1; }

/* tq-btn-start (Container of buttons, Contact's map card): a button whose words wrap starts its
   lines at the left, as on the source, where the card's text is left-aligned ("Open in Google
   Maps" at 320px). Elementor centres a button's words, which is right everywhere else: the
   source's other buttons sit in centred blocks. */
.tq-btn-start .elementor-button { text-align: start; }

/* ===== KEYBOARD FOCUS =====
   As on the source. Its homepage stylesheet (Home, Book a demo and the two overview pages: the pages
   whose sections carry tq-rm-all) rings whatever the keyboard has reached in teal, 2.5px wide and 3px
   out with 3px corners, and in white on the teal closing band. The other pages leave it to the
   browser's own ring. Astra's thin dotted outline gives way on both; a mouse click leaves no ring. */
html body :focus-visible,
html body .ast-builder-button-wrap .ast-custom-button-link:focus-visible,
html body .ast-header-navigation-arrow:focus-visible { outline: -webkit-focus-ring-color auto 1px; }
html:has(.tq-rm-all) body :focus-visible,
html:has(.tq-rm-all) body .ast-builder-button-wrap .ast-custom-button-link:focus-visible,
html:has(.tq-rm-all) body .ast-header-navigation-arrow:focus-visible { outline: 2.5px solid var(--ast-global-color-0); outline-offset: 3px; border-radius: 3px; }
html:has(.tq-rm-all) body .tq-on-teal :focus-visible { outline-color: #fff; }
/* Astra rings its header button on any focus, a click too */
html body .ast-builder-button-wrap .ast-custom-button-link:focus:not(:focus-visible) { outline: none; }

/* ===== FORMS (Forminator, design "None") =====
   Forminator adds no styling of its own with design "None"; these rules give its forms the source's
   look. Its rows are flattened into one grid, so the same form can lay out two fields to a row on one
   page and full-width fields on another. Messages and field errors only appear after a submit. */
.tq-form .forminator-custom-form, .tq-form-dark .forminator-custom-form { display: grid; grid-template-columns: 1fr 1fr; }
.tq-form .forminator-row, .tq-form-dark .forminator-row { display: contents; }
.tq-form .forminator-row-last .forminator-col, .tq-form-dark .forminator-row-last .forminator-col,
.tq-form .forminator-response-message, .tq-form-dark .forminator-response-message { grid-column: 1 / -1; }
.tq-form .forminator-response-message, .tq-form-dark .forminator-response-message { order: 1; margin: 14px 0 0; padding: 13px 16px; border-radius: 10px; font-size: 14.5px; line-height: 1.55; }
.tq-form .forminator-response-message[aria-hidden="true"], .tq-form-dark .forminator-response-message[aria-hidden="true"] { display: none; }
.tq-form .forminator-response-message p, .tq-form-dark .forminator-response-message p { margin: 0; }
.tq-form .forminator-label, .tq-form-dark .forminator-label { display: block; line-height: 1.65; }
.tq-form input.forminator-input, .tq-form select, .tq-form textarea,
.tq-form-dark input.forminator-input, .tq-form-dark select, .tq-form-dark textarea { display: block; width: 100%; height: auto; padding: 10px 12px; border: 1px solid; border-radius: 6px; background: #fff; font-family: inherit; font-weight: 400; box-shadow: none; transition: none; }
.tq-form textarea, .tq-form-dark textarea { resize: vertical; }
.tq-form .forminator-button-submit, .tq-form-dark .forminator-button-submit { width: 100%; margin: 0; border: 0; color: #fff; font-family: inherit; cursor: pointer; transition: none; }
/* The submit buttons answer the pointer as the source's do. On About and Contact the button is the page's
   .btn-primary: it rises 2px onto a deeper lip, over .16s, turning a lighter teal on About and green on
   Contact (darker while pressed). On Book a demo the shared stylesheet only turns it green, over .16s.
   Astra and Elementor's kit colour a focused button green, which the source does not, so a focused
   button keeps its resting colour (its keyboard ring is under KEYBOARD FOCUS). */
.tq-form .forminator-button-submit, .tq-form-dark .forminator-button-submit { transition: transform .16s, box-shadow .16s, background .16s; }
.tq-form .forminator-error-message, .tq-form-dark .forminator-error-message { display: block; margin: -8px 0 10px; font-size: 12.5px; line-height: 1.5; }
.tq-form .forminator-has_error input.forminator-input, .tq-form .forminator-has_error select, .tq-form .forminator-has_error textarea,
.tq-form-dark .forminator-has_error input.forminator-input, .tq-form-dark .forminator-has_error select, .tq-form-dark .forminator-has_error textarea { border-color: #C0392B; box-shadow: 0 0 0 3px rgb(192 57 43 / .22); }

/* tq-form (Shortcode widget, About): the enquiry card. First and last name side by side, 13px apart
   (stacked on phones), 13px under every box, a character counter under the notes, a full-width button. */
.tq-form .forminator-custom-form { column-gap: 13px; }
.tq-form .forminator-col-12 { grid-column: 1 / -1; }
.tq-form .forminator-label { margin: 0 0 5px; font-size: 13px; font-weight: 600; color: var(--ast-global-color-2); }
.tq-form .forminator-required { color: inherit; }
.tq-form input.forminator-input, .tq-form select, .tq-form textarea { margin: 0 0 13px; border-color: var(--ast-global-color-7); font-size: 15px; line-height: normal; color: var(--ast-global-color-2); }
.tq-form textarea { min-height: 78px; margin-bottom: 12.2px; } /* 4px, plus the text line the source's box sits on */
.tq-form .forminator-description { display: block; margin: 0 0 15px; font-size: 12.5px; line-height: 1.65; color: #9B9898; text-align: right; }
.tq-form .forminator-button-submit { display: flex; justify-content: center; padding: 14px 0; border-radius: 7px; background: var(--ast-global-color-0); box-shadow: 0 3px 0 var(--ast-global-color-1); font-size: 14px; font-weight: 600; line-height: 1.65; letter-spacing: .06em; text-transform: uppercase; }
.tq-form .forminator-button-submit:focus { background: var(--ast-global-color-0); color: #fff; }
.tq-form .forminator-button-submit:hover, .tq-form .forminator-button-submit:active { background: #03B892; color: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--ast-global-color-1); }
.tq-form .forminator-response-message.forminator-success { background: var(--ast-global-color-16); color: var(--ast-global-color-1); border: 1px solid rgb(2 168 133 / .28); }
.tq-form .forminator-response-message.forminator-error { background: rgb(192 57 43 / .08); color: #C0392B; border: 1px solid rgb(192 57 43 / .35); }
.tq-form .forminator-error-message { color: #C0392B; }
@media (max-width: 880px) {
	.tq-form .forminator-custom-form { grid-template-columns: 1fr; }
	.tq-form .forminator-field-name + .forminator-field-name { margin-top: 13px; }
}

/* tq-form-dark (Shortcode widget, Contact and Book a demo): the demo form on its dark panel. Two fields
   to a row, 15px between rows and 16px between columns (one column below 560px); light labels with a
   pink asterisk; the notes box five lines tall. On Contact even the product and notes boxes are half
   width, as on the source. tq-form-demo (Book a demo, styled by the shared stylesheet there) gives them
   the full width, sets the boxes 6px under their labels with no space below them, and makes the button
   2px taller without the green lip. */
.tq-form-dark .forminator-custom-form { gap: 15px 16px; }
.tq-form-dark .forminator-row-last .forminator-col { margin-top: 5px; } /* 20px under the fields: 15 of them are the grid's gap */
.tq-form-dark .forminator-label { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .015em; color: #FAFAFA; }
.tq-form-dark .forminator-required { color: #FFC2B5; }
.tq-form-dark input.forminator-input, .tq-form-dark select, .tq-form-dark textarea { margin: 0 0 14px; border-color: #9E9E9E; font-size: 15.5px; line-height: 1.65; color: #3A3A3A; }
.tq-form-dark textarea { height: calc(5 * 1.55em + 22px); min-height: 132px; margin-bottom: 4px; line-height: 1.55; }
.tq-form-dark input::placeholder, .tq-form-dark textarea::placeholder { color: #8A8A8A; opacity: 1; }
.tq-form-dark input:focus, .tq-form-dark select:focus, .tq-form-dark textarea:focus { outline: none; border-color: var(--ast-global-color-0); box-shadow: 0 0 0 3px rgb(2 168 133 / .38); }
.tq-form-dark .forminator-description { display: none; } /* the 600-character limit still applies; the source shows no counter */
.tq-form-dark .forminator-button-submit { display: block; padding: 12px 20px; border-radius: 12px; background: var(--ast-global-color-0); box-shadow: 0 3px 0 var(--ast-global-color-1); font-size: 19px; font-weight: 700; line-height: normal; letter-spacing: .01em; text-align: center; }
.tq-form-dark .forminator-button-submit:focus { background: var(--ast-global-color-0); color: #fff; }
.tq-form-dark .forminator-button-submit:hover, .tq-form-dark .forminator-button-submit:active { background: var(--ast-global-color-1); color: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--ast-global-color-1); }
.tq-form-dark .forminator-button-submit:active { background: #016A50; }
.tq-form-dark .forminator-response-message.forminator-success { background: rgb(255 255 255 / .14); color: #EAFFF7; border: 1px solid rgb(255 255 255 / .28); }
.tq-form-dark .forminator-response-message.forminator-error { background: rgb(192 57 43 / .16); color: #FFD9D4; border: 1px solid rgb(192 57 43 / .5); }
.tq-form-dark .forminator-error-message { color: #FFC2B5; }
.tq-form-demo .forminator-col-12 { grid-column: 1 / -1; }
.tq-form-demo .forminator-label { margin-bottom: 6px; }
.tq-form-demo input.forminator-input, .tq-form-demo select, .tq-form-demo textarea { margin-bottom: 0; }
.tq-form-demo .forminator-button-submit { padding: 13px 20px; box-shadow: none; transition: background .16s cubic-bezier(.22, .61, .36, 1); }
.tq-form-demo .forminator-button-submit:hover, .tq-form-demo .forminator-button-submit:active { transform: none; box-shadow: none; }
@media (max-width: 560px) {
	.tq-form-dark .forminator-custom-form { grid-template-columns: 1fr; }
}

/* tq-reach (Heading, Contact and Book a demo: the e-mail address and phone number under the photo):
   underlined under the pointer, as on the source. */
.tq-reach a:hover { text-decoration: underline; }

/* tq-cta-glow (Container "Closing call to action", homepage): the teal deepens toward the bottom centre,
   as on the source: an ellipse 110% of the band wide and 92% high, centred just below it, through four
   stops. The section's own background is the flat teal underneath. */
.tq-cta-glow { background-image: radial-gradient(110% 92% at 50% 104%, #018E70 0%, #029A7B 16%, #02A180 34%, var(--ast-global-color-0) 100%); }

/* tq-demo-glow (Container "Soft light", the demo band on Contact and Book a demo): the soft white light
   behind the words, as on the source. Elementor's own gradients can only centre it on an edge or the
   middle; the source places it a quarter of the way in, and makes it stronger on narrow screens. */
.tq-demo-glow { background-image: radial-gradient(104% 60% at 25% 46%, rgb(255 255 255 / .5) 0%, rgb(255 255 255 / .26) 48%, rgb(255 255 255 / 0) 78%); pointer-events: none; }
@media (max-width: 939px) {
	.tq-demo-glow { background-image: radial-gradient(128% 62% at 34% 40%, rgb(255 255 255 / .84) 0%, rgb(255 255 255 / .6) 46%, rgb(255 255 255 / .18) 82%); }
}
/* tq-chain, tq-doclink, tq-chainarrow (Containers: the chain of documents on Business Management
   System, its documents and the arrows between them): from 1120px down to 1041px the source drops the
   arrows and sets three documents to a row, 12px apart. That is the page's own breakpoint; from 1040px
   down Elementor's tablet settings carry on (two to a row). */
@media (min-width: 1041px) and (max-width: 1120px) {
	.elementor .elementor-element.e-con.tq-chain { --gap: 12px 12px; --row-gap: 12px; --column-gap: 12px; }
	.elementor .elementor-element.e-con.tq-doclink { --width: calc(33.333% - 12px); }
	.elementor .elementor-element.e-con.tq-chainarrow { display: none; }
}
/* tq-demogrid (Container "Words and form", the demo band on Contact and Book a demo): the words above
   the form, 40px apart, below 940px, as the source's .demogrid. Elementor's own breakpoints stack it
   only from 880px (Contact) or 820px (Book a demo) down. */
@media (max-width: 939px) {
	.elementor .elementor-element.e-con.tq-demogrid { --e-con-grid-template-columns: repeat(1, 1fr); --gap: 40px 40px; --row-gap: 40px; --column-gap: 40px; }
}
/* tq-dnote (Text Editor under the demo form on Contact): its links in the light teal, underlined
   (".elementor" outranks Elementor's own rule that takes underlines off links). */
.elementor .tq-dnote a { color: var(--ast-global-color-17); text-decoration: underline; text-underline-offset: 2px; }
.elementor .tq-dnote a:hover { color: #fff; }