/* ============================================================ tokens */
body.shr-lp {
	--gold:#E3A21B; --gold-hi:#F6BF4A;
	--ink:#141416; --ink-2:#3A3733; --ink-3:#6E6A63; --ink-4:#8C877F;
	--night:#0E0E10; --night-2:#22222A; --night-3:#1A1A21; --night-card:#2C2C36;
	--cream:#FAF8F5; --cream-2:#F2EEE7; --line:#EDE8E0; --line-2:#E2DDD4;
	--on-night:#F7F4EE; --on-night-2:#B7B1A7; --on-night-3:#9C968C;
	--wa:#22A45D; --wa-hi:#1D8E51; --danger:#D14343;
	--card:#FFFFFF; --field:#FBFAF8; --chip-line:#E7E2D9;
	--on-night-1:#EDE9E1; --reel-cap:#DDD8D0;
	--maxw:1180px; --pad:24px;
}

/* ============================================================ page reset */
/* Avada gives containers their own width and padding; the canvas is one
   1180px column throughout, so the section is the full-bleed background and
   the row is the measure. */
.lp-header .fusion-row, .lp-hero .fusion-row, .lp-reels .fusion-row,
.lp-stats .fusion-row, .lp-services .fusion-row, .lp-cases .fusion-row,
.lp-why .fusion-row, .lp-loc .fusion-row, .lp-footer .fusion-row {
	max-width:var(--maxw)!important; width:100%!important; margin:0 auto!important;
	padding-left:var(--pad)!important; padding-right:var(--pad)!important;
}
.lp-header .fusion-text, .lp-hero .fusion-text, .lp-reels .fusion-text,
.lp-stats .fusion-text, .lp-services .fusion-text, .lp-cases .fusion-text,
.lp-why .fusion-text, .lp-loc .fusion-text, .lp-footer .fusion-text {
	font-family:Cairo,system-ui,sans-serif;
}
.lp-hero *, .lp-reels *, .lp-stats *, .lp-services *,
.lp-cases *, .lp-why *, .lp-loc *, .lp-header *, .lp-footer * { box-sizing:border-box; }

/* ---- two-column rows ---- */
/* Avada already sizes flex columns at 50% each, so adding gap on top of that
   overflows the row and wraps it - the hero's form card ended up under the
   copy instead of beside it. Take the widths over entirely and let flex do the
   distribution, which is also what makes the 1.05/0.95 hero split possible. */
.lp-hero .fusion-builder-row,
.lp-why .fusion-builder-row,
.lp-loc .fusion-builder-row{ display:flex!important; flex-wrap:wrap; }
.lp-hero .fusion-layout-column,
.lp-why .fusion-layout-column,
.lp-loc .fusion-layout-column{
	width:auto!important; max-width:none!important; flex:1 1 340px; margin:0!important;
}
.lp-hero .fusion-builder-row{ gap:56px; align-items:flex-start; }
.lp-why .fusion-builder-row{ gap:56px; align-items:center; }
.lp-loc .fusion-builder-row{ gap:48px; align-items:center; }
.lp-hero .lp-hero-left{ flex:1.05 1 340px; }
.lp-hero .lp-form-card{ flex:0.95 1 340px; }

/* ============================================================ type */
/* These are raw h1/h2/h3/p inside a fusion_text, so Avada's global heading and
   paragraph styles apply to them - and they win: the hero h1 came out black at
   68px on a near-black background, and every paragraph margin was Avada's. The
   colour, size and margin declarations below carry !important for that reason
   and no other; anything Avada does not fight over is left alone. */
.lp-h1{
	color:#fff!important; font-size:46px!important; line-height:1.18; font-weight:900;
	margin:20px 0 18px!important; letter-spacing:-.5px; text-wrap:balance;
}
.lp-h1 span{ color:var(--gold)!important; display:inline-block; padding-bottom:2px; }
.lp-h2{ font-size:34px!important; font-weight:900; color:var(--ink)!important; margin:0!important;
	line-height:1.25; text-wrap:balance; }
.lp-reels .lp-h2, .lp-loc .lp-h2{ color:#fff!important; }
.lp-sub{ margin:10px 0 38px!important; color:var(--ink-3)!important; font-size:16px!important; }
.lp-reels .lp-sub{ color:var(--on-night-3)!important; margin-bottom:34px!important; }
.lp-center{ text-align:center; }
.lp-lede{ color:var(--on-night-2)!important; font-size:19px!important; line-height:1.8;
	margin:0!important; max-width:520px; text-wrap:pretty; }

/* ============================================================ buttons */
.lp-btn{
	display:inline-flex; align-items:center; gap:10px; justify-content:center;
	font-size:16px; font-weight:800; padding:15px 26px; border-radius:12px;
	text-decoration:none!important; transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.lp-btn-gold{ background:var(--gold); color:var(--ink)!important; }
.lp-btn-gold:hover{ background:var(--gold-hi); color:var(--ink)!important; }
.lp-btn-wa{ background:var(--wa); color:#fff!important; }
.lp-btn-wa:hover{ background:var(--wa-hi); color:#fff!important; }
.lp-btn-ghost{ border:1px solid rgba(255,255,255,.22); color:var(--on-night)!important; font-weight:700; }
.lp-btn-ghost:hover{ border-color:var(--gold); color:var(--gold)!important; }
.lp-btn-lg{ padding:15px 30px; font-weight:900; }
.lp-link{ color:var(--gold)!important; font-size:14px; font-weight:800; text-decoration:none!important; }
.lp-link:hover{ color:var(--gold-hi)!important; }

@keyframes lpPulse{
	0%{ box-shadow:0 0 0 0 rgba(34,164,93,.45); }
	70%{ box-shadow:0 0 0 14px rgba(34,164,93,0); }
	100%{ box-shadow:0 0 0 0 rgba(34,164,93,0); }
}
.lp-pulse{ animation:lpPulse 2.6s infinite; }
@media (prefers-reduced-motion:reduce){ .lp-pulse{ animation:none; } }

/* ============================================================ rail */
/* The site already floats its own phone/WhatsApp/Messenger stack. Two of them
   on one screen is one too many, so the global set is hidden here. */
body.shr-lp .sticky-buttons{ display:none!important; }
/* The site-wide preloader plugin puts a fixed, full-viewport overlay at
   z-index 99999 and fades it out after load. On a paid-traffic page that is a
   delay you are paying for, and while it fades it still has pointer-events,
   so it swallows the first tap on the hero's WhatsApp button. */
.plwao-loader-wrap{ display:none!important; }

/* Avada wraps the page in #main > .fusion-row, which has its own measure and
   padding. Left alone it insets every section and lets the theme's dark grey
   body show as a frame around the design. The sections below set their own
   full-bleed backgrounds, so this wrapper has to get out of the way. */
/* html is painted from PHP per variant: it sits above the body class the
   tokens are scoped to, so it cannot read them. */
body.shr-lp{ background:var(--night)!important; }
body.shr-lp #wrapper, body.shr-lp #boxed-wrapper, body.shr-lp #main{ background:var(--night); }
body.shr-lp #main{ padding:0!important; border:0!important; }
body.shr-lp #main > .fusion-row{
	max-width:none!important; width:100%!important; padding:0!important; margin:0!important;
}
body.shr-lp #content{ width:100%!important; margin:0!important; padding:0!important; float:none!important; }

.lp-rail{ position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:60;
	display:flex; flex-direction:column; gap:10px; }
.lp-rail-btn{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center;
	justify-content:center; font-size:20px; box-shadow:0 8px 22px rgba(0,0,0,.28);
	text-decoration:none!important; }
.lp-rail-tel{ background:var(--gold); color:var(--ink)!important; }
.lp-rail-wa{ background:var(--wa); color:#fff!important; font-size:18px; font-weight:800; }

/* ============================================================ header */
.lp-header{ background:var(--night)!important; border-bottom:1px solid var(--gold-a22); }
.lp-header .fusion-row{ padding-top:14px!important; padding-bottom:14px!important; }
.lp-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.lp-head-brand{ display:flex; align-items:center; gap:12px; }
/* The logo is the way back to the main site, so it gets a hit area of its own
   and a hover that says so. line-height:0 keeps the anchor from adding a text
   baseline's worth of height under the image. */
.lp-head-home{ display:inline-flex; line-height:0; border-radius:10px;
	transition:opacity .18s ease; }
.lp-head-home:hover{ opacity:.85; }
.lp-head-home:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.lp-head-logo{ width:42px; height:42px; object-fit:contain; border-radius:10px;
	border:1px solid var(--gold-a50); padding:4px; }
.lp-head-names{ display:flex; flex-direction:column; line-height:1.25; }
.lp-head-name{ color:var(--on-night); font-size:16px; font-weight:800; }
.lp-head-sub{ color:var(--on-night-3); font-size:12px; font-weight:500; }
.lp-head-actions{ display:flex; align-items:center; gap:12px; }
.lp-head-hours{ color:var(--on-night-3); font-size:13px; font-weight:500; }
.lp-head .lp-btn{ font-size:14px; padding:11px 20px; border-radius:999px; }

/* ============================================================ hero */
.lp-hero{ background:var(--night)!important; position:relative; overflow:hidden; }
.lp-hero::before{
	content:""; position:absolute; inset:0; pointer-events:none;
	background-image:
		radial-gradient(circle at 78% 18%, var(--gold-a16), transparent 46%),
		radial-gradient(circle at 12% 88%, var(--gold-a07), transparent 44%);
}
.lp-hero .fusion-row{ position:relative; padding-top:64px!important; padding-bottom:76px!important; }
.lp-hero-left{ padding-top:18px; }

.lp-eyebrow{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--gold-a45);
	color:var(--gold); font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px; }

.lp-checks{ list-style:none; display:grid; gap:12px; margin:30px 0 0; padding:0; max-width:520px; }
.lp-checks li{ display:flex; align-items:center; gap:12px; color:var(--on-night-1); font-size:16px; font-weight:500; margin:0; }
.lp-tick{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--gold-a16);
	color:var(--gold); display:flex; align-items:center; justify-content:center;
	font-size:13px; font-weight:900; }
.lp-tick-solid{ background:var(--gold); color:var(--ink); }

.lp-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; }

.lp-proof{ display:flex; align-items:center; gap:14px; margin:34px 0 0; padding-top:24px;
	border-top:1px solid rgba(255,255,255,.09); }
.lp-avatars{ display:flex; flex:none; }
.lp-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover;
	border:2px solid var(--night); }
.lp-avatar + .lp-avatar{ margin-right:-10px; }
.lp-proof-text{ color:var(--on-night-3); font-size:14px; font-weight:500; }
.lp-proof-text b{ color:var(--gold); font-weight:800; }

/* ============================================================ form card */
.lp-form-card{
	background:var(--card); border-radius:20px; padding:28px!important;
	box-shadow:0 30px 70px rgba(0,0,0,.45); border-top:4px solid var(--gold);
}
.lp-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.lp-card-head h2{ margin:0!important; font-size:24px!important; font-weight:900; color:var(--ink)!important; }
.lp-badge{ font-size:12px; font-weight:700; color:var(--wa); background:rgba(34,164,93,.1);
	padding:5px 10px; border-radius:999px; white-space:nowrap; }
.lp-card-sub{ margin:8px 0 22px!important; font-size:14px!important; color:var(--ink-3)!important; line-height:1.7; }

/* A fusion_form's own post content is itself an Avada container/row/column, so
   the fields are not children of <form> - they sit in a NESTED column wrapper,
   which inherits the 1180px measure from the section reset above and collapsed
   the whole form to 267px. Flatten that nesting first, then make the wrapper
   holding the fields the grid.
   Two columns exist only so phone and city can share a row the way the canvas
   has them; everything else spans both. Under dir=rtl the grid flows
   right-to-left on its own, putting the phone (first in the DOM) on the right. */
.lp-form-card .fusion-form .fusion-fullwidth,
.lp-form-card .fusion-form .fusion-row,
.lp-form-card .fusion-form .fusion-layout-column,
.lp-form-card .fusion-form .fusion-column-wrapper{
	width:100%!important; max-width:none!important;
	margin:0!important; padding:0!important; min-height:0!important;
}
.lp-form-card .fusion-form .fusion-column-wrapper{
	display:grid!important; grid-template-columns:1fr 1fr; gap:16px 14px;
}
.lp-form-card .fusion-form-field{ grid-column:1 / -1; margin:0!important; }
.lp-form-card .lp-f-phone, .lp-form-card .lp-f-city{ grid-column:auto; }
/* Hidden inputs still occupy a grid cell and pull a 16px gap with them. */
.lp-form-card .fusion-form-hidden-field{ display:none!important; }
.lp-form-card .fusion-form-label-wrapper,
.lp-form-card label .label,
.lp-form-card legend .label{
	font-size:13px!important; font-weight:700!important; color:var(--ink-2)!important;
	margin-bottom:7px!important; display:block;
}
.lp-form-card .fusion-form-element-required{ color:var(--danger); border:0; text-decoration:none; }
.lp-form-card input[type=text],
.lp-form-card input[type=tel],
.lp-form-card input[type=email],
.lp-form-card textarea{
	width:100%; border:1px solid var(--line-2)!important; border-radius:11px!important;
	font-size:15px!important; color:var(--ink)!important; background:var(--field)!important;
	font-family:Cairo,system-ui,sans-serif!important; box-shadow:none!important;
}
.lp-form-card input[type=text],
.lp-form-card input[type=tel]{ height:48px!important; padding:0 14px!important; }
.lp-form-card textarea{ padding:12px 14px!important; resize:vertical; }
.lp-form-card input:focus, .lp-form-card textarea:focus{
	border-color:var(--gold)!important; background:#fff!important; outline:none;
}
.lp-form-card ::placeholder{ color:#A9A49C; }
/* The canvas puts the phone number LTR but keeps it flush to the right edge. */
.lp-form-card .lp-f-phone input{ direction:ltr; text-align:right; }

/* ---- service chips ---- */
/* Avada renders a fieldset of .fusion-form-checkbox rows. The legend is not a
   grid item (browsers render it outside the fieldset's content box), so making
   the fieldset a grid lays out the chips and leaves the label above them.
   grid-auto-rows:1fr forces every row to the tallest chip, so a two-line label
   does not make its tile shorter than its neighbours. */
.lp-form-card .lp-f-services fieldset{
	border:0; padding:0; margin:0; min-width:0;
	display:grid; grid-template-columns:repeat(3,1fr); gap:8px; grid-auto-rows:1fr;
}
.lp-form-card .lp-f-services legend{ width:100%; padding:0; margin-bottom:10px; }

/* Everything below is deliberately written with Avada's own four-class chain.
   Avada draws a checkbox of its own - a 13px rounded box from label::before,
   a 7px filled square from input:checked + label::after, and label padding to
   reserve room for them - from selectors carrying three classes. A two-class
   rule loses to those, which is why a tick placed on ::after never appeared and
   why the text sat off-centre against an indent meant for a box we don't want.
   Matching their depth is what makes this cascade land, no !important needed. */
.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox{
	display:block; position:relative; height:100%; margin:0;
}

/* The native control is never painted and never hit: the label covers the whole
   tile and toggles it through for=. Visually-hidden rather than display:none so
   it stays focusable and stays in the accessibility tree. */
.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input{
	position:absolute; width:1px; height:1px; margin:0;
	opacity:0; pointer-events:none; clip-path:inset(50%);
}

.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox label{
	position:relative; display:flex; align-items:center; justify-content:center;
	gap:8px; text-align:center;
	height:100%; min-height:64px; margin:0;
	/* fusion-form-rtl.css sets padding:0 20px 0 0 from a FIVE-class chain
	   (.rtl + the four below) to make room for the box we just removed, which
	   outranks this rule. One !important is cheaper than an arms race. */
	padding:12px 10px!important;
	border:1px solid var(--chip-line); background:var(--field); border-radius:11px;
	font-size:13.5px; font-weight:700; color:var(--ink-2);
	line-height:1.35; cursor:pointer;
	transition:border-color .14s ease, background .14s ease, transform .14s ease;
}

/* The tick sits in the flow beside the label rather than floating in a corner,
   and it is rendered whether or not the box is ticked - transparent until it
   is - so selecting one never shifts the text it sits next to. */
.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox label::before{
	content:"\2713";
	position:static; transform:none; flex:none;
	width:19px; height:19px; min-width:19px;
	display:flex; align-items:center; justify-content:center;
	border:1.5px solid #D9D3C8; border-radius:50%;
	background:transparent; color:transparent;
	font-size:11px; font-weight:900; line-height:1;
	transition:background .14s ease, border-color .14s ease, color .14s ease;
}
/* Avada's 7px square. */
.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked + label::after{
	content:none;
}

.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked + label{
	border-color:var(--gold); background:var(--gold-a11);
	box-shadow:inset 0 0 0 1px var(--gold);
}
.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked + label::before{
	background:var(--gold); border-color:var(--gold); color:var(--ink);
}
.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox label:hover{
	border-color:var(--gold); transform:translateY(-1px);
}
.lp-form-card .fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:focus-visible + label{
	outline:2px solid var(--gold); outline-offset:2px;
}

.lp-picked{ float:left; font-size:12px; font-weight:700; color:var(--gold); }

/* ---- submit ---- */
.lp-form-card button.fusion-button{
	width:100%; height:54px; border:none!important; border-radius:12px!important;
	background:var(--gold)!important; color:var(--ink)!important;
	font-family:Cairo,system-ui,sans-serif!important; font-size:17px!important; font-weight:900!important;
	box-shadow:0 10px 24px var(--gold-a35)!important; cursor:pointer;
	transition:background .18s ease;
}
.lp-form-card button.fusion-button:hover{ background:var(--gold-hi)!important; }
.lp-form-card button.fusion-button .fusion-button-text{ color:var(--ink)!important; }
.lp-privacy{ margin:0; text-align:center; font-size:12px; color:var(--ink-4); }

/* ============================================================ reels */
.lp-reels{ background:var(--night-2)!important; }
.lp-reels .fusion-row{ padding-top:64px!important; padding-bottom:64px!important; }
.shr-reels{ position:relative; margin:0; }
.shr-reels-track{
	display:flex; gap:18px; overflow-x:auto; overflow-y:hidden;
	scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
	scrollbar-width:none; padding:2px 0 4px;
}
.shr-reels-track::-webkit-scrollbar{ display:none; }
.shr-reel{
	position:relative; display:block; flex:0 0 74vw; max-width:300px;
	scroll-snap-align:center; background:var(--night-card);
	border:1px solid rgba(255,255,255,.07); border-radius:16px; overflow:hidden;
	text-decoration:none!important; transition:transform .22s ease, box-shadow .22s ease;
}
.shr-reel:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.5); }
.shr-reel:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.shr-reel-media{ position:relative; display:block; aspect-ratio:9/16; background:#0d0f17; }
.shr-reel-cover{ width:100%; height:100%; display:block; object-fit:cover; }
/* Play button drawn in CSS, not inline SVG: KSES strips <svg> from post
   content and the Avada text editor rewrites it on every save. */
.shr-reel-play{
	position:absolute; top:50%; left:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
	border-radius:50%; background:rgba(255,255,255,.9);
	transition:background .2s ease, transform .2s ease;
}
.shr-reel-play::before{
	content:""; position:absolute; top:50%; left:50%; width:0; height:0;
	/* physical margins on purpose - a play glyph points right in every locale,
	   so this must not flip under dir="rtl" */
	margin:-10px 0 0 -5px;
	border-top:10px solid transparent; border-bottom:10px solid transparent;
	border-left:16px solid var(--ink);
}
.shr-reel:hover .shr-reel-play{ background:var(--gold); transform:scale(1.06); }
.shr-reel-cap{
	display:block; padding:14px; color:var(--reel-cap); font-size:13.5px; line-height:1.7; font-weight:500;
}
.shr-reels-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.shr-reels-dots span{
	width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28);
	transition:background .25s ease, width .25s ease, border-radius .25s ease;
}
.shr-reels-dots span.is-on{ background:var(--gold); width:22px; border-radius:4px; }

/* Arrows, injected by reels.js only when the strip actually overflows, so they
   never appear over a grid that has nothing to scroll. Hidden by default and
   revealed at the desktop breakpoint: on a phone the gesture is the control. */
.shr-reels-nav{ display:none; }

/* Wide screens: the column count comes from a class because KSES's CSS filter
   drops custom properties out of inline style attributes, so it cannot be
   passed in the markup. */
/* Two to four reels fit across a desktop, so the strip becomes a grid and the
   dots go away. Five or six keep the scrolling strip, but sized to the same
   four-across rhythm rather than squeezed into slivers - four are fully
   visible and the rest are a scroll away, with a sliver of the fifth showing
   so it is obvious there is more. */
@media (min-width:1024px){
	.shr-reels-2 .shr-reels-track,
	.shr-reels-3 .shr-reels-track,
	.shr-reels-4 .shr-reels-track{ overflow:visible; scroll-snap-type:none; }
	.shr-reels-2 .shr-reel,
	.shr-reels-3 .shr-reel,
	.shr-reels-4 .shr-reel{ max-width:none; }
	.shr-reels-2 .shr-reel{ flex:0 0 calc((100% - 18px) / 2); }
	.shr-reels-3 .shr-reel{ flex:0 0 calc((100% - 36px) / 3); }
	.shr-reels-4 .shr-reel{ flex:0 0 calc((100% - 54px) / 4); }
	.shr-reels-2 .shr-reels-dots,
	.shr-reels-3 .shr-reels-dots,
	.shr-reels-4 .shr-reels-dots{ display:none; }

	/* 3 gaps between the four on screen, one more gap and a 34px sliver of the
	   next card: 3*18 + 18 + 34 = 106. */
	.shr-reels-5 .shr-reel,
	.shr-reels-6 .shr-reel{
		flex:0 0 calc((100% - 106px) / 4); max-width:none;
		/* start, not centre: with four cards on screen a centred snap would jump
		   the strip a card and a half on every nudge. */
		scroll-snap-align:start;
	}
	/* The dots track one visible card, which is meaningless once four are on
	   screen at a time - the arrows are the affordance here instead. */
	.shr-reels-5 .shr-reels-dots,
	.shr-reels-6 .shr-reels-dots{ display:none; }

	.shr-reels.has-nav .shr-reels-nav{
		/* Nudged above the midpoint so it lands on the cover rather than the
		   caption, and stays on it if a caption wraps to a second line. */
		display:grid; place-items:center; position:absolute; top:calc(50% - 44px);
		width:44px; height:44px; padding:0; margin:0; z-index:3;
		border:1px solid rgba(255,255,255,.14); border-radius:50%;
		background:rgba(12,14,20,.72); backdrop-filter:blur(6px);
		color:#fff; cursor:pointer;
		transition:background .18s ease, opacity .18s ease, transform .18s ease;
	}
	.shr-reels.has-nav .shr-reels-nav:hover{ background:var(--gold); color:var(--ink); transform:scale(1.06); }
	.shr-reels.has-nav .shr-reels-nav:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
	.shr-reels.has-nav .shr-reels-nav[disabled]{ opacity:0; pointer-events:none; }
	/* Logical insets, so "previous" sits at the reading-start edge under either
	   direction. Kept inside the track rather than hanging off it: at exactly
	   1024px there is no gutter to hang into. */
	.shr-reels-prev{ inset-inline-start:6px; }
	.shr-reels-next{ inset-inline-end:6px; }
	/* A chevron drawn from borders: KSES strips <svg> out of post content, and
	   these buttons live in the same subtree. Physical borders and explicit
	   rotations on purpose - a logical border inside a rotated box points
	   somewhere different in each direction, which is a bug waiting to happen. */
	.shr-reels-nav::before{
		content:""; width:10px; height:10px;
		border-top:2px solid currentColor; border-right:2px solid currentColor;
	}
	/* RTL: later reels are to the left, so "next" points left. */
	.shr-reels-next::before{ transform:translateX(2px) rotate(-135deg); }
	.shr-reels-prev::before{ transform:translateX(-2px) rotate(45deg); }
	[dir="ltr"] .shr-reels-next::before{ transform:translateX(-2px) rotate(45deg); }
	[dir="ltr"] .shr-reels-prev::before{ transform:translateX(2px) rotate(-135deg); }
}

/* ============================================================ stats */
.lp-stats{ background:var(--night-3)!important; border-top:1px solid rgba(255,255,255,.06); }
.lp-stats .fusion-row{ padding-top:34px!important; padding-bottom:34px!important; }
.lp-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.lp-stat-n{ color:var(--gold); font-size:30px; font-weight:900; line-height:1.2; }
.lp-stat-l{ color:var(--on-night-3); font-size:14px; margin-top:4px; }

/* ============================================================ services */
.lp-services{ background:var(--cream-2)!important; }
.lp-services .fusion-row{ padding-top:76px!important; padding-bottom:76px!important; }
.lp-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.lp-svc{ background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
	transition:transform .16s ease, box-shadow .16s ease; }
.lp-svc:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,20,22,.1); }
.lp-svc-media{ aspect-ratio:16/10; overflow:hidden; }
.lp-svc-img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-svc-body{ padding:20px; }
.lp-svc-body h3{ margin:0!important; font-size:19px!important; font-weight:800; color:var(--ink)!important; }
.lp-svc-body p{ margin:8px 0 14px!important; font-size:14.5px!important; line-height:1.8; color:var(--ink-3)!important; }

/* ============================================================ cases */
/* The two light bands swap shades with the order they appear in: before &
   after now runs first, and leaving both on their old colours would put two
   identical creams either side of the services/why boundary. */
.lp-cases{ background:var(--cream)!important; }
.lp-cases .fusion-row{ padding-top:76px!important; padding-bottom:76px!important; }
.lp-cases .lp-grid-3{ gap:20px; }
.lp-case{ background:var(--card); border:1px solid #E6E0D7; border-radius:16px; overflow:hidden; }
.lp-case-label{ padding:14px 16px; font-size:14px; font-weight:600; color:var(--ink-2); }

/* ---- the slider itself ---- */
/* Avada's image-before-after element, the same one the clinic's home page
   uses. Everything below is skin only - the drag handle, the RTL image order
   and the clip maths are the theme's. */
.lp-case-ba{ line-height:0; }
/* The element sets content-box on its own subtree deliberately, to keep a
   theme's global reset out of the clip maths. The section-wide border-box
   line at the top of this file is exactly that reset, so it is put back. */
.lp-cases .fusion-image-before-after-container,
.lp-cases .fusion-image-before-after-container *{ box-sizing:content-box; }
/* A stand-in height for the moment before the element's script has run: its
   images are absolutely positioned, so until then the card would collapse to
   just its caption.

   :not(.initialized) matters. The script sets a pixel height on this box and
   never touches its width, so with an aspect-ratio still in force the width
   would be computed back from that height - and since the script derives the
   height from the width, the pair would lock each other at whatever size the
   page first rendered at and ignore every resize after it. Avada stamps
   .initialized on when the script takes over, which is exactly when this
   fallback has to get out of the way. */
.lp-cases .fusion-image-before-after-container:not(.initialized){ aspect-ratio:3/2; }

/* Avada reveals the labels on hover behind a dimming overlay. A phone has no
   hover, and this card's design has always-on pills, so they stay put and the
   dimming goes. */
.lp-cases .fusion-image-before-after-before-label,
.lp-cases .fusion-image-before-after-after-label{ opacity:1; }
.lp-cases .fusion-image-before-after-overlay:hover{ background:transparent; }
.lp-cases .fusion-image-before-after-horizontal .fusion-image-before-after-before-label:before,
.lp-cases .fusion-image-before-after-horizontal .fusion-image-before-after-after-label:before{
	top:10px; transform:none; padding:3px 9px; border-radius:999px;
	font-size:11px; font-weight:700; letter-spacing:0;
}
.lp-cases .fusion-image-before-after-horizontal .fusion-image-before-after-before-label:before{
	background:rgba(20,20,22,.75); color:#fff;
}
.lp-cases .fusion-image-before-after-horizontal .fusion-image-before-after-after-label:before{
	background:var(--gold); color:var(--ink); font-weight:800;
}
/* Avada places the two labels for a left-to-right page and its RTL stylesheet
   only swaps the images' z-index, so under dir="rtl" each pill ends up over
   the half it is not describing: there the "before" image is the right one. */
.rtl .lp-cases .fusion-image-before-after-horizontal .fusion-image-before-after-before-label:before{
	right:10px; left:auto;
}
.rtl .lp-cases .fusion-image-before-after-horizontal .fusion-image-before-after-after-label:before{
	left:10px; right:auto;
}

/* ============================================================ why */
.lp-why{ background:var(--cream)!important; }
.lp-why .fusion-row{ padding-top:76px!important; padding-bottom:76px!important; }
.lp-why .fusion-builder-row{ gap:56px; }
.lp-reasons{ list-style:none; display:grid; gap:14px; margin:26px 0 30px; padding:0; }
.lp-reasons li{ display:flex; align-items:flex-start; gap:12px; font-size:16px; line-height:1.7;
	color:var(--ink-2); font-weight:500; margin:0; }
/* The portrait is a 1:2 banner with the doctor's name set into the artwork, so
   it is shown whole and simply held to a width the section can carry - cropping
   it to a landscape frame would cut the name off. */
.lp-why-media{ aspect-ratio:1/2; max-width:320px; margin-inline:auto;
	border-radius:18px; overflow:hidden; background:#EFE9DF; }
.lp-why-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================ location */
.lp-loc{ background:var(--night-2)!important; }
.lp-loc .fusion-row{ padding-top:64px!important; padding-bottom:64px!important; }
.lp-loc .fusion-builder-row{ gap:48px; }
.lp-loc .lp-h2{ font-size:32px!important; }
.lp-loc-addr{ margin:14px 0 8px!important; color:var(--on-night-2)!important; font-size:16px!important; line-height:1.9; }
.lp-loc-hours{ margin:0 0 22px!important; color:var(--gold)!important; font-size:16px!important; font-weight:800; }
.lp-map{ aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#2E2E38; }
.lp-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.2); }

/* ============================================================ footer */
.lp-footer{ background:var(--night)!important; border-top:1px solid rgba(255,255,255,.07); }
.lp-footer .fusion-row{ padding-top:26px!important; padding-bottom:26px!important; }
.lp-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
	color:#7E796F; font-size:13px; }
.lp-foot span:last-child{ color:#57534B; }

/* ============================================================ responsive */
/* Breakpoints match the canvas: 1240 drops the rail, 1000 stacks the two-column
   rows, 640 is the phone layout. */
@media (max-width:1240px){ .lp-rail{ display:none!important; } }

@media (max-width:1000px){
	.lp-head-hours{ display:none; }
	.lp-hero .fusion-builder-row, .lp-why .fusion-builder-row, .lp-loc .fusion-builder-row{ gap:36px; }
	.lp-hero .fusion-layout-column, .lp-why .fusion-layout-column, .lp-loc .fusion-layout-column{ flex-basis:100%; }
	.lp-hero-left{ padding-top:0; }
	.lp-grid-3{ grid-template-columns:repeat(2,1fr); }
	.lp-reels .shr-reel{ max-width:280px; }
}

@media (max-width:640px){
	.lp-h1{ font-size:33px!important; margin-bottom:14px!important; }
	.lp-h2{ font-size:25px!important; }
	.lp-lede{ font-size:17px!important; }
	.lp-grid-3{ grid-template-columns:1fr; }
	.lp-stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
	.lp-form-card{ padding:20px!important; }
	.lp-form-card .lp-f-services fieldset{ grid-template-columns:repeat(2,1fr); }
	.lp-form-card .lp-f-phone, .lp-form-card .lp-f-city{ grid-column:1 / -1; }
	.lp-form-card .fusion-form .fusion-column-wrapper{ gap:16px; }
	/* Phone: the logo carries the brand on its own. The name beside it squeezed
	   the call button into the corner, and the logo already carries the
	   wordmark, so the text was saying it twice. */
	.lp-head-brand .lp-head-names{ display:none; }
	.lp-head .lp-btn{ padding:10px 14px; font-size:12.5px; white-space:nowrap; }
	.lp-foot{ justify-content:center; text-align:center; }
	.lp-hero-cta .lp-btn{ flex:1 1 100%; }
}