/* Enquiry chat (ported from the live theme's wp.css). The rules below use the old theme's token names;
   they are mapped onto the 2026 tokens here, scoped to the chat, so it takes the new palette and fonts. */
.sychat{--tx:var(--bone);--mu:var(--mute);--fa:var(--faint);--line:var(--rule-2);--line2:var(--rule);--card2:var(--panel-2);
  --rl:var(--r-lg);--fb:var(--f-body);--fd:var(--f-display);--bg:var(--ink);visibility:visible}
/* ==========================================================================
   THE CHAT BOX
   ========================================================================== */

.sychat { position: fixed; right: 24px; bottom: 24px; z-index: 900; font-family: var( --fb ); }

@media ( max-width: 520px ) {
	.sychat { right: 14px; bottom: 14px; left: 14px; }
}

/* ---- launcher ---- */
.sylaunch {
	position: absolute; right: 0; bottom: 0;
	width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
	background: var( --grad ); color: var( --ink );
	display: grid; place-items: center;
	box-shadow: 0 16px 40px -12px rgba( 0, 245, 160, .55 ), inset 0 0 0 1px rgba( 255, 255, 255, .09 );
	transition: transform .4s var( --ease ), box-shadow .4s var( --ease );
}

.sylaunch:hover { transform: translateY( -3px ) scale( 1.04 ); }
.sylaunch svg { width: 24px; height: 24px; display: block; }
.sylaunch .ico-chat { display: grid; place-items: center; }
.sylaunch .ico-close { display: none; }
.sychat.is-open .sylaunch { background: var( --card2 ); color: var( --tx ); box-shadow: 0 10px 30px -14px #000, inset 0 0 0 1px var( --line2 ); }
.sychat.is-open .sylaunch .ico-chat { display: none; }
.sychat.is-open .sylaunch .ico-close { display: block; }

/* the unread dot: the launcher has to read as "there is something here" */
.sylaunch::after {
	content: ''; position: absolute; top: 3px; right: 3px;
	width: 11px; height: 11px; border-radius: 50%;
	background: var( --pk ); border: 2px solid var( --bg );
	opacity: 0; transform: scale( .4 ); transition: .35s var( --ease );
}

.sychat.has-ping .sylaunch::after { opacity: 1; transform: scale( 1 ); }
.sychat.is-open .sylaunch::after { opacity: 0; }

/* ---- the peek ---- */
.sypeek {
	position: absolute; right: 74px; bottom: 8px;
	width: max-content; max-width: 250px;
	background: var( --card2 ); border: 1px solid var( --line2 );
	border-radius: 16px 16px 4px 16px; padding: 13px 16px;
	font-size: 13px; line-height: 1.5; color: var( --tx );
	box-shadow: 0 20px 50px -20px rgba( 0, 0, 0, .9 );
	opacity: 0; transform: translateY( 8px ) scale( .96 ); transform-origin: 100% 100%;
	pointer-events: none; transition: .5s var( --ease );
}

.sychat.has-peek .sypeek { opacity: 1; transform: none; pointer-events: auto; }
.sypeek b { display: block; font-weight: 600; margin-bottom: 2px; }
.sypeek span { color: var( --mu ); font-size: 12px; }

/* 26, not 22. The audit counts anything under 24px as a tap target nobody can
   reliably hit, and it was right to: this is the one control on the widget a
   visitor presses when they want it to go away, and missing it opens the chat
   instead. */
.sypeekx {
	position: absolute; top: -10px; right: -10px; width: 26px; height: 26px;
	border-radius: 50%; background: var( --panel ); border: 1px solid var( --line2 );
	color: var( --mu ); cursor: pointer; display: grid; place-items: center;
	font-size: 13px; line-height: 1; padding: 0;
}

.sypeekx:hover { color: var( --tx ); }

@media ( max-width: 520px ) {
	.sypeek { right: 74px; left: 0; max-width: none; }
}

/* ---- panel ---- */
.sypanel {
	position: absolute; right: 0; bottom: 74px;
	width: 378px; height: min( 560px, calc( 100vh - 130px ) );
	display: flex; flex-direction: column; overflow: hidden;
	background: linear-gradient( 180deg, rgba( 16, 20, 24, .96 ), rgba( 8, 10, 13, .98 ) );
	backdrop-filter: blur( 26px ) saturate( 1.4 );
	border: 1px solid var( --line2 ); border-radius: var( --rl );
	box-shadow: 0 40px 90px -30px rgba( 0, 0, 0, .95 ), inset 0 0 0 1px rgba( 255, 255, 255, .03 );
	opacity: 0; transform: translateY( 14px ) scale( .97 ); transform-origin: 100% 100%;
	pointer-events: none;
	transition: opacity .38s var( --ease ), transform .38s var( --ease );
}

.sychat.is-open .sypanel { opacity: 1; transform: none; pointer-events: auto; }
.sypanel::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var( --grad ); opacity: .85; }

@media ( max-width: 520px ) {
	.sypanel { width: auto; left: 0; right: 0; height: min( 74vh, 560px ); }
}

/* ---- head ---- */
.syhead { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var( --line ); flex-shrink: 0; }

.syav {
	width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
	display: grid; place-items: center;
	background: linear-gradient( 150deg, rgba( 0, 245, 160, .2 ), rgba( 139, 92, 246, .22 ) );
	border: 1px solid rgba( 255, 255, 255, .1 ); color: var( --em );
}

.syav svg { width: 19px; height: 19px; }
.syhead h4 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.syhead .syon { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var( --mu ); margin-top: 3px; }
.syhead .syon i { width: 6px; height: 6px; border-radius: 50%; background: var( --em ); box-shadow: 0 0 0 3px rgba( 0, 245, 160, .16 ); }

/* A close inside the panel as well as the launcher: on a phone the launcher is
   behind the sheet, and reaching past a dialog to dismiss it is not a gesture. */
.syclose {
	margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
	background: none; border: 1px solid var( --line ); border-radius: 9px;
	color: var( --mu ); cursor: pointer; display: grid; place-items: center; transition: .25s;
}

.syclose:hover { color: var( --tx ); border-color: var( --line2 ); }
.syclose svg { width: 14px; height: 14px; }

/* ---- progress ---- */
.syprog { height: 2px; background: rgba( 255, 255, 255, .05 ); flex-shrink: 0; }
.syprog i { display: block; height: 100%; width: 0; background: var( --grad ); transition: width .55s var( --ease ); }

/* ---- log ---- */
.sylog { flex: 1; overflow-y: auto; padding: 20px 18px 8px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.sylog::-webkit-scrollbar { width: 5px; }
.sylog::-webkit-scrollbar-thumb { background: rgba( 255, 255, 255, .11 ); border-radius: 9px; }

.symsg { max-width: 84%; font-size: 13.5px; line-height: 1.6; padding: 11px 14px; border-radius: 16px; animation: syin .42s var( --ease ) both; }

@keyframes syin { from { opacity: 0; transform: translateY( 9px ); } to { opacity: 1; transform: none; } }

.symsg.bot { align-self: flex-start; background: var( --card2 ); border: 1px solid var( --line ); border-bottom-left-radius: 5px; color: var( --tx ); }
.symsg.bot a { color: var( --em ); }
.symsg.me { align-self: flex-end; background: linear-gradient( 140deg, rgba( 0, 245, 160, .17 ), rgba( 139, 92, 246, .17 ) ); border: 1px solid rgba( 0, 245, 160, .24 ); border-bottom-right-radius: 5px; color: var( --tx ); font-weight: 500; }
.symsg small { display: block; font-size: 11.5px; color: var( --mu ); margin-top: 4px; line-height: 1.5; }

.sytyping { align-self: flex-start; display: flex; gap: 4px; padding: 13px 15px; background: var( --card2 ); border: 1px solid var( --line ); border-radius: 16px; border-bottom-left-radius: 5px; }
.sytyping i { width: 5px; height: 5px; border-radius: 50%; background: var( --mu ); animation: sydot 1.3s infinite; }
.sytyping i:nth-child( 2 ) { animation-delay: .18s; }
.sytyping i:nth-child( 3 ) { animation-delay: .36s; }

@keyframes sydot { 0%, 60%, 100% { opacity: .25; transform: translateY( 0 ); } 30% { opacity: 1; transform: translateY( -3px ); } }

/* ---- composer ---- */
.syfoot { border-top: 1px solid var( --line ); padding: 12px 14px 14px; flex-shrink: 0; background: rgba( 0, 0, 0, .22 ); }

.sychips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.sychips:empty { display: none; }

.sychips button {
	font: inherit; font-size: 12px; font-weight: 500; color: var( --tx ); cursor: pointer;
	background: rgba( 255, 255, 255, .04 ); border: 1px solid var( --line2 );
	border-radius: 999px; padding: 8px 13px; transition: .25s var( --ease );
}

.sychips button:hover { border-color: rgba( 0, 245, 160, .45 ); background: rgba( 0, 245, 160, .1 ); color: var( --em ); transform: translateY( -1px ); }
.sychips button.ghost { color: var( --fa ); border-style: dashed; }
.sychips button.ghost:hover { color: var( --mu ); background: rgba( 255, 255, 255, .03 ); border-color: var( --line2 ); }

.syrow { display: flex; gap: 8px; align-items: flex-end; }
.syrow.is-off { opacity: .35; pointer-events: none; }

.syinput { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: rgba( 255, 255, 255, .04 ); border: 1px solid var( --line2 ); border-radius: 14px; padding: 0 4px 0 13px; transition: .25s; }
.syinput:focus-within { border-color: rgba( 0, 245, 160, .5 ); background: rgba( 0, 245, 160, .05 ); }
.syinput input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var( --tx ); font: inherit; font-size: 13.5px; padding: 12px 0; }
.syinput input::placeholder { color: var( --fa ); }

/* The label is there for a screen reader; the placeholder is there for eyes. */
.syvis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); white-space: nowrap; }

/* The chat's dialling-code picker.
   Same control the contact form uses, so .ccbtn, .ccp, .ccl and .cci all come
   from main.css. Three things differ: the row is a third as wide, so the button
   drops to flag plus code and loses its own border; the row sits at the bottom
   of the viewport, so the panel opens upward; and the panel is narrower than
   the phone it has to fit inside. */
.sycc { position: relative; flex: none; }
.sycc[hidden] { display: none; }
.sycc .ccbtn { width: auto; gap: 5px; padding: 11px 9px 11px 0; margin-right: 2px; border: 0; border-right: 1px solid var( --line ); border-radius: 0; background: none; color: var( --mu ); font-size: 13px; }
.sycc .ccbtn:hover { border-color: var( --line ); color: var( --tx ); }
.sycc .ccbtn.open { background: none; border-color: var( --line ); color: var( --em ); }
.sycc .ccbtn .dc { flex: none; }
.sycc .ccbtn .cvr { width: 10px; height: 10px; }
.sycc .ccp { top: auto; bottom: calc( 100% + 12px ); left: -10px; width: 272px; max-width: calc( 100vw - 64px ); transform: translateY( 6px ); }
.sycc .ccp.open { transform: none; }
.sycc .ccl { max-height: 208px; }

.sysend { width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; background: var( --grad ); color: var( --ink ); transition: .3s var( --ease ); }
.sysend:hover { transform: translateY( -2px ); }
.sysend svg { width: 17px; height: 17px; }

.syfine { margin-top: 9px; font-size: 10.5px; color: var( --fa ); display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.syfine svg { width: 11px; height: 11px; flex-shrink: 0; color: var( --em ); }

/* ---- the close ---- */
.sydone { text-align: center; padding: 8px 4px 4px; animation: syin .5s var( --ease ) both; }
.sydone .tick { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba( 0, 245, 160, .12 ); border: 1px solid rgba( 0, 245, 160, .4 ); color: var( --em ); }
.sydone .tick svg { width: 24px; height: 24px; }
.sydone h5 { font-family: var( --fd ); font-size: 20px; font-weight: 400; margin: 0 0 7px; }
.sydone p { font-size: 13px; color: var( --mu ); line-height: 1.6; max-width: 31ch; margin: 0 auto; }

.syref { display: inline-block; margin-top: 13px; font-size: 11.5px; letter-spacing: .06em; color: var( --em ); background: rgba( 0, 245, 160, .09 ); border: 1px solid rgba( 0, 245, 160, .28 ); border-radius: 999px; padding: 6px 13px; font-variant-numeric: tabular-nums; }

.sylinks { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.sylinks a { font-size: 12px; font-weight: 600; color: var( --tx ); text-decoration: none; border: 1px solid var( --line2 ); border-radius: 999px; padding: 9px 15px; transition: .25s; }
.sylinks a:hover { border-color: rgba( 0, 245, 160, .45 ); color: var( --em ); }

@media ( prefers-reduced-motion: reduce ) {
	.sychat *,
	.sychat *::before,
	.sychat *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The conversation sits on the composer until it has enough to fill the panel.

   A 560px panel holding one greeting looked like a loading state - a bubble
   marooned at the top with 300px of nothing under it. Anchoring to the bottom
   is how every chat behaves and it makes the first message feel like it just
   arrived rather than like it was always there.

   A ::before with margin-top:auto rather than justify-content:flex-end, which
   makes content that overflows the top unreachable in a scroll container. */
.sylog::before { content: ''; margin-top: auto; }

/* Once the enquiry is in, the composer has nothing left to do. */
.sychat.is-done .syfoot { display: none; }

/* The chat steps aside for the mobile menu.
   The drawer covers the page at z-index 300, the chat sits at 900, so the
   launcher floated over an open menu. chat.js watches #mdrawer and sets this. */
.sychat.is-away { opacity: 0; visibility: hidden; pointer-events: none; }

/* Turnstile.
   The wrapper must take no space when the integration is off and none while an
   interaction-only widget is sitting quietly - but it must NOT be display:none
   at page load. Cloudflare's implicit renderer walks the document looking for
   .cf-turnstile the moment its script arrives, and a hidden container is a
   container it refuses to render into: "Could not find widget for provided
   container", no token, every form refused. An empty div is already zero
   pixels tall; it only needed its margins withheld until it has content. */
.sycap { width: 100%; margin: 0; }
.wpcf7-form .sycap:not( :empty ) { margin: 4px 0 0; }
/* The chat's widget is in execute mode, which reserves a 70px placeholder from
   the moment it renders - a gap in the middle of a chat window, for a challenge
   that will not run until the visitor has finished answering. Collapse it, and
   let chat.js open it for the few seconds the challenge is actually live: it
   must be visible then, or Cloudflare will not run in it. */
.sychat .sycap { max-height: 0; overflow: hidden; margin: 0; }
.sychat .sycap.is-live { max-height: 140px; overflow: visible; margin: 0 0 10px; }


/* ---- brand buttons: the chat's actions use the site's button system (.btn / .btn.ghost in main.css) ----
   Primary (launcher, send, the first action after sending) = emerald fill, ink text, emerald glow on hover.
   Secondary (answer chips, other actions) = ghost pill with the hairline ring. No gradient fills on controls. */
.sylaunch { background: var( --em ); color: var( --ink ); box-shadow: 0 16px 40px -14px rgb( 0 245 160 / .55 ); }
.sylaunch:hover { transform: translateY( -3px ); box-shadow: 0 10px 40px -10px rgb( 0 245 160 / .7 ); }
.sysend { border-radius: 999px; background: var( --em ); color: var( --ink ); }
.sysend:hover { transform: none; box-shadow: 0 10px 40px -10px rgb( 0 245 160 / .55 ); }
.sychips button { border-radius: 999px; background: transparent; color: var( --bone ); border: 0; box-shadow: inset 0 0 0 1px rgb( 244 245 247 / .28 ); }
.sychips button:hover { background: transparent; color: var( --em ); box-shadow: inset 0 0 0 1px rgb( 0 245 160 / .6 ); transform: none; }
.sylinks a { border: 0; border-radius: 999px; padding: 0 18px; min-height: 40px; display: inline-flex; align-items: center; font-weight: 500; font-size: 13px;
	color: var( --bone ); box-shadow: inset 0 0 0 1px rgb( 244 245 247 / .28 ); transition: box-shadow .35s var( --ease ), color .25s; }
.sylinks a:hover { color: var( --bone ); box-shadow: inset 0 0 0 1px rgb( 244 245 247 / .5 ); }
.sylinks a:first-child { background: var( --em ); color: var( --ink ); box-shadow: none; }
.sylinks a:first-child:hover { color: var( --ink ); box-shadow: 0 10px 40px -10px rgb( 0 245 160 / .55 ); }

/* ---- Audit fixes, Sep 2026 ---------------------------------------------------------------------
   Sticky "Book a free consultation" bar (phones and tablets, main.css): both are emerald and the
   launcher sat on its right end, reading as one control. Lift the launcher clear of the bar while the
   bar is up (12px gap + 52px bar + 12px gap); the bar steps aside while the panel is open, so the open
   chat drops back to its usual corner and the panel keeps its full height. */
@media ( max-width: 1079px ) {
	.sychat { transition: bottom .45s var( --ease ), opacity .3s, visibility .3s; }
	body:has( .sticky-cta.show:not( .h-off ) ):not( .co-form-in ) .sychat:not( .is-open ) { bottom: 76px; }
	body:has( .sychat.is-open ) .sticky-cta { transform: translateY( 140% ) !important; }
	/* A form on screen: the launcher would sit on its fields (chat.js sets is-form, as main.js does
	   for the sticky bar). */
	.sychat.is-form:not( .is-open ) { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* "Something else" read as disabled next to the other answers. Same weight, same ring. */
.sychips button.ghost { color: var( --bone ); }
.sychips button.ghost:hover { color: var( --em ); box-shadow: inset 0 0 0 1px rgb( 0 245 160 / .6 ); }

/* The dialog takes focus while the first question is on its way; it needs no ring of its own. */
.sypanel:focus { outline: none; }

/* 44px touch areas without changing what the eye sees. */
.syclose { position: relative; }
.syclose::after { content: ''; position: absolute; inset: -7px; }
.sypeekx::after { content: ''; position: absolute; inset: -9px; }

/* Phones: the nudge is pinned between the left edge and the launcher. width:max-content kept it on one
   line, wider than the screen, and the page zoomed out to fit it. */
@media ( max-width: 520px ) {
	.sypeek { width: auto; }
}