/**
 * Shopify CRO Landing — front-end styles.
 * Monochrome by default; the six colour settings feed the custom properties
 * printed inline by Scro_Assets::inline_css().
 */

:root{
	--scro-ink:#000000;
	--scro-paper:#ffffff;
	--scro-dark:#0a0a0a;
	--scro-alt:#f4f4f4;
	--scro-muted:#5c5c5c;
	--scro-line:#e3e3e3;
	--scro-container:1180px;
	--scro-radius:14px;
	--scro-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ------------------------------------------------------------------ shell */
.scro-root{
	color:var(--scro-ink);
	background:var(--scro-paper);
	font-size:16px;
	line-height:1.6;
}
.scro-root *,
.scro-root *::before,
.scro-root *::after{box-sizing:border-box}

/* Break out of a theme's content container.
   The two offsets are measured per page by scro.js — never assume the theme
   centres its container, because plenty of them do not. With width left on
   auto, the negative margins alone stretch each section to the viewport edges,
   so nothing can overflow and no horizontal scrollbar appears. */
.scro-root--bleed .scro-sec{
	margin-left:calc(-1 * var(--scro-bleed-left,0px));
	margin-right:calc(-1 * var(--scro-bleed-right,0px));
}

/* Rescue: the correction goes on the wrapper, not on each section, so the
   wrapper itself stops being wider than the screen. Correcting the sections
   alone left the wrapper at the theme's width, and it kept the page scrolling
   sideways even though the sections looked right. */
.scro-root--rescue{
	margin-left:calc(-1 * var(--scro-bleed-left,0px));
	width:var(--scro-vw,auto);
	max-width:var(--scro-vw,none);
}

.scro-wrap{
	width:100%;
	max-width:var(--scro-container);
	margin:0 auto;
	padding:0 24px;
}
.scro-root .scro-wrap{max-width:min(var(--scro-container),100%)}

.scro-sec{
	padding:80px 0;
	position:relative;
	/* Hard cap on every section, in any mode. If the theme's own container is
	   wider than the screen — common on phones — the sections must not inherit
	   that width, or their content gets cut off at the right edge.
	   --scro-vw is the real viewport width in px, set by JS; 100vw is not used
	   because it includes the scrollbar and overflows on desktop. */
	max-width:var(--scro-vw,none);
}
.scro-alt{background:var(--scro-alt)}
.scro-dark{
	background:var(--scro-dark);
	color:var(--scro-paper);
}

.scro-root img,
.scro-root svg,
.scro-root video,
.scro-root iframe,
.scro-root canvas{max-width:100%}
.scro-root img{height:auto;display:block}

/* Long unbroken strings (URLs, emails, brand names) must wrap rather than
   push the layout wider than the screen. */
.scro-root,
.scro-root p,
.scro-root h1,
.scro-root h2,
.scro-root h3,
.scro-root h4,
.scro-root span,
.scro-root a,
.scro-root li{overflow-wrap:break-word;word-wrap:break-word}

/* ------------------------------------------------------------- typography */
.scro-title{
	font-family:var(--scro-display);
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.02em;
	font-size:clamp(24px,3.4vw,40px);
	line-height:1.15;
	text-align:center;
	margin:0 0 14px;
}
.scro-sub{
	text-align:center;
	color:var(--scro-muted);
	max-width:620px;
	margin:0 auto 44px;
}
.scro-dark .scro-sub{color:rgba(255,255,255,.66)}
.scro-caption{
	text-align:center;
	color:var(--scro-muted);
	font-size:13px;
	margin:16px 0 0;
}

.scro-root mark{
	background:var(--scro-ink);
	color:var(--scro-paper);
	padding:0 .18em;
	border-radius:2px;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}
.scro-dark mark{
	background:var(--scro-paper);
	color:var(--scro-ink);
}

.scro-stars{letter-spacing:2px}

/* ---------------------------------------------------------------- buttons */
.scro-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	background:var(--scro-ink);
	color:var(--scro-paper);
	font-weight:700;
	font-size:15px;
	line-height:1.2;
	padding:15px 28px;
	border:2px solid var(--scro-ink);
	border-radius:999px;
	text-decoration:none;
	cursor:pointer;
	transition:background .2s,color .2s,transform .2s;
}
.scro-btn:hover,
.scro-btn:focus{
	background:transparent;
	color:var(--scro-ink);
	transform:translateY(-2px);
}
.scro-btn--invert{
	background:var(--scro-paper);
	color:var(--scro-ink);
	border-color:var(--scro-paper);
}
.scro-btn--invert:hover,
.scro-btn--invert:focus{
	background:transparent;
	color:var(--scro-paper);
}
.scro-btn--block{display:flex;width:100%}

/* ------------------------------------------------------------------- hero */
.scro-hero{
	text-align:center;
	padding:78px 0 62px;
	overflow:hidden;
}
.scro-hero__bg{
	position:absolute;
	inset:0;
	opacity:.18;
}
.scro-hero__bg img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.scro-hero .scro-wrap{position:relative;z-index:2}
.scro-kicker{
	display:inline-block;
	font-size:12px;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	border:1px solid rgba(255,255,255,.4);
	border-radius:999px;
	padding:7px 18px;
	margin:0 0 22px;
}
.scro-hero__title{
	font-family:var(--scro-display);
	font-weight:900;
	text-transform:uppercase;
	font-size:clamp(26px,4.6vw,52px);
	line-height:1.1;
	max-width:960px;
	margin:0 auto 20px;
}
.scro-hero__text{
	color:rgba(255,255,255,.72);
	max-width:680px;
	margin:0 auto 30px;
}
.scro-hero__slots{
	margin:20px 0 0;
	font-size:13px;
	letter-spacing:.04em;
	color:rgba(255,255,255,.6);
}
.scro-rating{
	margin:20px 0 0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	flex-wrap:wrap;
	font-size:13px;
	color:rgba(255,255,255,.75);
}
.scro-rating b{color:#fff}

/* ------------------------------------------------------------- logo strip */
.scro-logos{padding:0 0 52px}
.scro-logos__label{
	text-align:center;
	font-size:11px;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:rgba(255,255,255,.42);
	margin:0 0 20px;
}
.scro-logos__row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:44px;
	flex-wrap:wrap;
}
.scro-logos__item img{
	max-height:34px;
	width:auto;
	opacity:.85;
	transition:opacity .2s;
}
.scro-logos__item:hover img{opacity:1}
.scro-logos__item--text{
	font-family:var(--scro-display);
	font-weight:700;
	font-size:17px;
	letter-spacing:.04em;
	color:rgba(255,255,255,.55);
}

/* ------------------------------------------------------------------ cards */
.scro-card{
	background:var(--scro-paper);
	border:1px solid var(--scro-line);
	border-radius:var(--scro-radius);
	box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.scro-grid{display:grid;gap:26px}
.scro-grid--2{grid-template-columns:repeat(2,1fr)}
.scro-grid--4{grid-template-columns:repeat(4,1fr)}

/* ------------------------------------------------------------------ chart */
.scro-chart{padding:26px}
.scro-chart__shot{border-radius:calc(var(--scro-radius) - 6px)}
.scro-chart__legend{
	display:flex;
	gap:26px;
	flex-wrap:wrap;
	margin-bottom:18px;
	font-size:13px;
	font-weight:600;
	color:var(--scro-muted);
}
.scro-chart__legend span{display:flex;align-items:center;gap:8px}
.scro-key{
	width:11px;
	height:11px;
	border-radius:2px;
	display:inline-block;
}
.scro-key--before{background:#c9c9c9}
.scro-key--after{background:var(--scro-ink)}
.scro-chart .scro-gridline{stroke:var(--scro-line)}
.scro-chart .scro-axis{font-size:11px;fill:var(--scro-muted)}
.scro-chart .scro-line-before{fill:none;stroke:#c9c9c9;stroke-width:2.5;stroke-linejoin:round}
.scro-chart .scro-line-after{fill:none;stroke:var(--scro-ink);stroke-width:3;stroke-linejoin:round}
.scro-chart .scro-dot{fill:var(--scro-ink)}

/* ------------------------------------------------------------ case studies */
.scro-case{display:flex;flex-direction:column;overflow:hidden}
.scro-case__media{
	aspect-ratio:16/10;
	background:var(--scro-alt);
	overflow:hidden;
}
.scro-case__media img{width:100%;height:100%;object-fit:cover}
.scro-case__body{padding:22px 24px 26px}
.scro-case__tag{
	font-size:11px;
	letter-spacing:.16em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--scro-muted);
	margin:0;
}
.scro-case__title{
	font-family:var(--scro-display);
	font-size:19px;
	line-height:1.3;
	margin:8px 0 10px;
}
.scro-case__text{color:var(--scro-muted);font-size:15px}
.scro-case__text p{margin:0 0 16px}
.scro-stats{
	display:flex;
	gap:14px;
	border-top:1px solid var(--scro-line);
	padding-top:18px;
	margin-top:4px;
}
.scro-stats > div{flex:1;text-align:center}
.scro-stats__v{
	display:block;
	font-family:var(--scro-display);
	font-weight:800;
	font-size:20px;
}
.scro-stats__l{
	display:block;
	font-size:11px;
	color:var(--scro-muted);
	margin-top:2px;
}

/* ------------------------------------------------------------------ split */
.scro-split{
	display:grid;
	grid-template-columns:1fr 1.05fr;
	gap:48px;
	align-items:center;
}
.scro-services .scro-split{align-items:start}
.scro-about__title{
	font-family:var(--scro-display);
	font-weight:900;
	text-transform:uppercase;
	font-size:clamp(22px,3vw,34px);
	line-height:1.15;
	margin:0 0 18px;
}
.scro-about__text{color:rgba(255,255,255,.72);margin:0 0 26px}
.scro-about__logo{margin:0 0 18px}
.scro-about__logo img{max-height:44px;width:auto}

/* ------------------------------------------------------------------ video */
.scro-video{
	position:relative;
	border-radius:var(--scro-radius);
	overflow:hidden;
	aspect-ratio:16/9;
	background:#141414;
	border:1px solid rgba(255,255,255,.14);
	display:grid;
	place-items:center;
}
.scro-video.is-playable{cursor:pointer}
.scro-video__poster,
.scro-video img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.scro-video iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.scro-video__play{
	position:relative;
	z-index:2;
	width:66px;
	height:66px;
	border-radius:50%;
	background:var(--scro-paper);
	display:grid;
	place-items:center;
	transition:transform .2s;
}
.scro-video__play::after{
	content:"";
	border-left:18px solid var(--scro-ink);
	border-top:11px solid transparent;
	border-bottom:11px solid transparent;
	margin-left:5px;
}
.scro-video:hover .scro-video__play{transform:scale(1.08)}
.scro-video__badge{
	position:absolute;
	top:16px;
	left:16px;
	z-index:2;
	background:var(--scro-paper);
	color:var(--scro-ink);
	font-weight:800;
	font-size:11px;
	letter-spacing:.1em;
	text-transform:uppercase;
	padding:6px 12px;
	border-radius:4px;
}
.scro-video__cap{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:2;
	padding:14px 18px;
	font-size:13px;
	color:rgba(255,255,255,.92);
	background:linear-gradient(transparent,rgba(0,0,0,.75));
}
.scro-testi__video{max-width:820px;margin:0 auto 38px}

/* -------------------------------------------------------------- portfolio */
.scro-pf{margin-top:44px}
.scro-pf:first-of-type{margin-top:0}
.scro-pf__title{
	text-align:center;
	font-family:var(--scro-display);
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.06em;
	font-size:18px;
	margin:0 0 20px;
}
.scro-pf__grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:12px;
}
.scro-pf__tile{
	border-radius:10px;
	overflow:hidden;
	aspect-ratio:3/4;
	background:#1c1c1c;
	border:1px solid rgba(255,255,255,.1);
}
.scro-pf__tile img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------- theme-proofing reset
   The accordion rows are real <button> elements and many themes style bare
   buttons hard (background, border, radius, padding, colour), often with
   !important or with more specificity than a single class. Neutralise that
   here so the rows read as plain text rows in any theme. */
.scro-root button.scro-acc__head,
.scro-root button.scro-btn{
	-webkit-appearance:none;
	appearance:none;
	text-shadow:none;
	text-decoration:none;
	min-height:0;
	min-width:0;
	width:auto;
	margin:0;
	font-family:inherit;
}
.scro-root button.scro-acc__head{
	width:100% !important;
	background:transparent !important;
	border:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	color:var(--scro-ink) !important;
	padding:18px 4px !important;
	font-family:var(--scro-display) !important;
	font-size:14px !important;
	font-weight:700 !important;
	text-transform:uppercase !important;
	letter-spacing:.05em;
	line-height:1.4;
}
.scro-root .scro-acc__item--faq button.scro-acc__head{
	padding:15px 4px !important;
	font-family:inherit !important;
	font-size:15px !important;
	font-weight:600 !important;
	text-transform:none !important;
	letter-spacing:0;
}
.scro-root button.scro-acc__head:hover,
.scro-root button.scro-acc__head:focus{
	background:transparent !important;
	color:var(--scro-ink) !important;
}
.scro-root button.scro-acc__head:focus-visible{
	outline:2px solid var(--scro-ink);
	outline-offset:2px;
}

/* Layout lock. The appearance reset above is not enough on its own: a theme
   forcing display/text-align/flex on buttons or content re-flows these rows
   (centred questions, chevrons in the wrong place). Structural properties are
   pinned here so the layout is the plugin's regardless of the theme. */
.scro-root button.scro-acc__head{
	display:flex !important;
	flex-direction:row !important;
	align-items:center !important;
	justify-content:space-between !important;
	text-align:left !important;
	gap:16px !important;
	float:none !important;
	position:relative !important;
	direction:ltr !important;
}
.scro-root button.scro-acc__head > span:first-child{
	flex:1 1 auto !important;
	min-width:0 !important;
	text-align:left !important;
}
.scro-root .scro-acc__chev{flex:0 0 auto !important}
.scro-root .scro-acc__body{overflow:hidden !important}
.scro-root .scro-wrap{
	margin-left:auto !important;
	margin-right:auto !important;
	float:none !important;
}
.scro-root .scro-sec{float:none !important;clear:both}
.scro-root .scro-split,
.scro-root .scro-grid,
.scro-root .scro-faq__grid,
.scro-root .scro-pf__grid,
.scro-root .scro-trust__grid,
.scro-root .scro-form__grid{display:grid !important}

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below the content's minimum width. On a phone that made the services /
   how-it-works column 399px wide inside a 375px screen and pushed every card
   and heading off the right edge. Measured on the live site: 143 elements
   overflowing before, 0 after. */
.scro-root .scro-split > *,
.scro-root .scro-grid > *,
.scro-root .scro-faq__grid > *,
.scro-root .scro-pf__grid > *,
.scro-root .scro-trust__grid > *,
.scro-root .scro-form__grid > *,
.scro-root .scro-step,
.scro-root .scro-step > *,
.scro-root .scro-acc,
.scro-root .scro-acc__item,
.scro-root .scro-review,
.scro-root .scro-case{min-width:0 !important}
.scro-root .scro-faq__cat{text-align:left !important}

/* The contact form's submit is a <button>, so it needs the same protection.
   Anchors get it too, for themes that force underlines on content links. */
.scro-root button.scro-btn,
.scro-root a.scro-btn{
	background:var(--scro-ink) !important;
	color:var(--scro-paper) !important;
	border:2px solid var(--scro-ink) !important;
	border-radius:999px !important;
	padding:15px 28px !important;
	box-shadow:none !important;
	text-decoration:none !important;
	text-transform:none !important;
	font-family:inherit !important;
	font-size:15px !important;
	font-weight:700 !important;
	width:auto !important;
}
.scro-root button.scro-btn:hover,
.scro-root button.scro-btn:focus,
.scro-root a.scro-btn:hover,
.scro-root a.scro-btn:focus{
	background:transparent !important;
	color:var(--scro-ink) !important;
}
.scro-root button.scro-btn--invert,
.scro-root a.scro-btn--invert{
	background:var(--scro-paper) !important;
	color:var(--scro-ink) !important;
	border-color:var(--scro-paper) !important;
}
.scro-root button.scro-btn--invert:hover,
.scro-root button.scro-btn--invert:focus,
.scro-root a.scro-btn--invert:hover,
.scro-root a.scro-btn--invert:focus{
	background:transparent !important;
	color:var(--scro-paper) !important;
}
.scro-root a.scro-btn--block,
.scro-root button.scro-btn--block{width:100% !important}


/* ------------------------------------------------- monochrome image mode
   Off by default: photos render in full colour. Setting Branding → Image
   style to "Black and white" adds .scro-root--mono, which drains every
   photo to match the rest of the design. */
.scro-root--mono .scro-case__media img,
.scro-root--mono .scro-pf__tile img,
.scro-root--mono .scro-trust__av img,
.scro-root--mono .scro-review__av img,
.scro-root--mono .scro-faq__figure img,
.scro-root--mono .scro-video__poster,
.scro-root--mono .scro-video img,
.scro-root--mono .scro-hero__bg img{filter:grayscale(1)}

.scro-root--mono .scro-logos__item img,
.scro-root--mono .scro-about__logo img{filter:grayscale(1) brightness(0) invert(1)}
.scro-root--mono .scro-logos__item img{opacity:.7}

/* --------------------------------------------------- whole-image mode
   Default. Images keep their own proportions instead of being cropped into
   a fixed tile shape, which matters for tall store screenshots. The
   portfolio becomes a masonry flow so uneven heights still tile neatly. */
.scro-root--fit .scro-pf__grid{
	display:block !important;
	column-count:5;
	column-gap:12px;
}
.scro-root--fit .scro-pf__tile{
	aspect-ratio:auto;
	height:auto;
	margin:0 0 12px;
	break-inside:avoid;
	-webkit-column-break-inside:avoid;
}
.scro-root--fit .scro-pf__tile img{height:auto;object-fit:fill}
.scro-root--fit .scro-case__media{aspect-ratio:auto;height:auto}
.scro-root--fit .scro-case__media img{height:auto;object-fit:fill}
.scro-root--fit .scro-faq__figure{aspect-ratio:auto;height:auto}
.scro-root--fit .scro-faq__figure img{height:auto;object-fit:fill}

/* ------------------------------------------------------------- lightbox */
.scro-zoom{
	position:fixed;
	inset:0;
	z-index:99999;
	display:none;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(0,0,0,.9);
}
.scro-zoom.is-open{display:flex}
html.scro-zoom-open{overflow:hidden}
.scro-zoom__figure{margin:0;max-width:100%;max-height:100%;display:flex}
.scro-zoom__figure img{
	/* Natural size, only shrunk when it would not otherwise fit. */
	width:auto;
	height:auto;
	max-width:100%;
	max-height:90vh;
	object-fit:contain;
	border-radius:4px;
	background:#fff;
}
.scro-zoom__close,
.scro-zoom__nav{
	position:absolute;
	background:rgba(255,255,255,.14);
	color:#fff;
	border:0;
	border-radius:50%;
	cursor:pointer;
	line-height:1;
	transition:background .15s;
}
.scro-zoom__close:hover,
.scro-zoom__nav:hover{background:rgba(255,255,255,.3)}
.scro-zoom__close{top:16px;right:16px;width:44px;height:44px;font-size:28px}
.scro-zoom__nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:30px}
.scro-zoom__nav--prev{left:12px}
.scro-zoom__nav--next{right:12px}
.scro-zoom--single .scro-zoom__nav{display:none}
.scro-pf__tile a,
.scro-case__media a,
.scro-review__shot a{cursor:zoom-in}

/* ---------------------------------------------------------- linked tiles */
.scro-pf__tile a,
.scro-logos__item a{display:block;width:100%;height:100%}
.scro-pf__tile a{position:relative}
.scro-pf__tile a::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0);
	transition:background .2s;
}
.scro-pf__tile a:hover::after{background:rgba(0,0,0,.18)}
.scro-logos__item a:hover img{opacity:1}

/* --------------------------------------------------------------- services */
.scro-col-title{
	font-family:var(--scro-display);
	font-weight:800;
	text-transform:uppercase;
	font-size:22px;
	letter-spacing:.04em;
	margin:0 0 24px;
}
.scro-acc__item{border-bottom:1px solid var(--scro-line)}
.scro-acc__head{
	width:100%;
	background:none;
	border:0;
	text-align:left;
	padding:18px 4px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	font-family:var(--scro-display);
	font-weight:700;
	font-size:14px;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--scro-ink);
	cursor:pointer;
}
.scro-acc__item--faq .scro-acc__head{
	font-family:inherit;
	font-size:15px;
	text-transform:none;
	letter-spacing:0;
	font-weight:600;
	padding:15px 4px;
}
.scro-acc__chev{
	width:26px;
	height:26px;
	flex:none;
	border-radius:50%;
	background:var(--scro-ink);
	color:var(--scro-paper);
	display:grid;
	place-items:center;
	font-size:14px;
	line-height:1;
	transition:transform .25s;
}
.scro-acc__item--faq .scro-acc__chev{
	width:22px;
	height:22px;
	background:transparent;
	color:var(--scro-muted);
	border:1px solid var(--scro-line);
	font-size:12px;
}
.scro-acc__item.is-open .scro-acc__chev{transform:rotate(45deg)}
.scro-acc__item--faq.is-open .scro-acc__chev{
	transform:rotate(180deg);
	background:var(--scro-ink);
	color:var(--scro-paper);
	border-color:var(--scro-ink);
}
.scro-acc__body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.scro-acc__body p{
	margin:0 0 18px;
	color:var(--scro-muted);
	font-size:15px;
	padding-right:40px;
}

/* ------------------------------------------------------------------ steps */
.scro-step{
	display:grid;
	grid-template-columns:52px 1fr;
	gap:18px;
	position:relative;
	padding-bottom:22px;
}
.scro-step::before{
	content:"";
	position:absolute;
	left:25px;
	top:56px;
	bottom:-4px;
	width:2px;
	background:repeating-linear-gradient(var(--scro-line) 0 6px,transparent 6px 12px);
}
.scro-step:last-child::before{display:none}
.scro-step__num{
	width:52px;
	height:52px;
	border-radius:50%;
	background:var(--scro-ink);
	color:var(--scro-paper);
	display:grid;
	place-items:center;
	font-family:var(--scro-display);
	font-weight:900;
	font-size:19px;
}
.scro-step__card{
	background:var(--scro-paper);
	border:1px solid var(--scro-line);
	border-radius:var(--scro-radius);
	padding:18px 20px;
}
.scro-step__label{
	font-family:var(--scro-display);
	font-weight:800;
	font-size:15px;
	letter-spacing:.06em;
	text-transform:uppercase;
	margin:0 0 2px;
}
.scro-step__title{margin:0 0 6px;font-size:15px;font-weight:700}
.scro-step__text{margin:0;color:var(--scro-muted);font-size:14px}
.scro-steps__cta{margin:26px 0 0;text-align:center}

/* ------------------------------------------------------------- trusted by */
.scro-trust__grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:16px;
	margin-top:36px;
}
.scro-trust{
	display:flex;
	align-items:center;
	gap:12px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	border-radius:999px;
	padding:8px 18px 8px 8px;
	text-decoration:none;
	color:inherit;
}
.scro-trust__av{
	width:44px;
	height:44px;
	border-radius:50%;
	flex:none;
	overflow:hidden;
	background:#242424;
	border:2px solid var(--scro-paper);
}
.scro-trust__av img{width:100%;height:100%;object-fit:cover}
.scro-trust__meta{display:flex;flex-direction:column;min-width:0}
.scro-trust__name{font-size:13px;font-weight:700;line-height:1.2}
.scro-trust__role{font-size:11px;color:rgba(255,255,255,.55)}

/* ------------------------------------------------------------ logo grid
   For company logos rather than photos of people: the whole logo is shown
   on a light tile so any logo colour reads against the dark section, and
   nothing is cropped. */
.scro-trust__grid--logos{
	grid-template-columns:repeat(4,1fr);
	gap:18px;
}
.scro-trust--logo{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	background:transparent;
	border:0;
	border-radius:0;
	padding:0;
}
.scro-trust__logo{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:104px;
	padding:18px;
	background:var(--scro-paper);
	border-radius:var(--scro-radius);
	overflow:hidden;
}
.scro-trust__logo img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	/* contain, so a wide or tall logo keeps its shape */
	object-fit:contain;
}
.scro-trust__wordmark{
	font-family:var(--scro-display);
	font-weight:800;
	font-size:16px;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--scro-ink);
	text-align:center;
	line-height:1.2;
}
.scro-trust--logo .scro-trust__meta{
	align-items:center;
	text-align:center;
}
a.scro-trust--logo .scro-trust__logo{transition:transform .2s}
a.scro-trust--logo:hover .scro-trust__logo{transform:translateY(-3px)}
.scro-root--mono .scro-trust__logo img{filter:grayscale(1)}

/* ------------------------------------------------------------ testimonials */
.scro-review{
	background:var(--scro-paper);
	color:var(--scro-ink);
	border-radius:var(--scro-radius);
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:12px;
}
.scro-review .scro-stars{font-size:13px}
.scro-review__quote{flex:1;font-size:14px;color:var(--scro-muted)}

/* A card built around an uploaded review screenshot: the image runs to the
   card edges and the padding moves onto the text below it. */
.scro-review--shot{padding:0;overflow:hidden}
.scro-review__shot{margin:0}
.scro-review__shot a{display:block}
.scro-review__shot img{
	width:100%;
	height:auto;
	display:block;
	border-bottom:1px solid var(--scro-line);
}
.scro-review--shot .scro-review__quote,
.scro-review--shot .scro-review__meta{margin:0 18px}
.scro-review--shot .scro-review__quote{margin-top:16px}
.scro-review--shot .scro-review__meta{
	margin-bottom:16px;
	border-top:0;
	padding-top:0;
}
.scro-review--shot .scro-review__quote + .scro-review__meta{
	border-top:1px solid var(--scro-line);
	padding-top:12px;
	margin-top:12px;
}
.scro-review__quote p{margin:0}
.scro-review__meta{
	display:flex;
	align-items:center;
	gap:10px;
	border-top:1px solid var(--scro-line);
	padding-top:12px;
}
.scro-review__av{
	width:34px;
	height:34px;
	border-radius:50%;
	flex:none;
	overflow:hidden;
	background:var(--scro-alt);
}
.scro-review__av img{width:100%;height:100%;object-fit:cover}
.scro-review__name{display:block;font-size:13px;font-weight:700;line-height:1.2}
.scro-review__role{display:block;font-size:11px;color:var(--scro-muted)}

/* ----------------------------------------------------------------- letter */
.scro-letter__inner{max-width:820px}
.scro-letter__date{font-size:12px;color:var(--scro-muted);margin:0 0 22px}
.scro-letter__salut{font-family:var(--scro-display);font-size:26px;margin:0 0 22px}
.scro-letter__body p{margin:0 0 18px;font-size:16px}
.scro-letter__sign{margin:26px 0 0;font-weight:700}
.scro-letter__name{display:block}
.scro-letter__role{display:block;font-weight:400;color:var(--scro-muted);font-size:14px}
.scro-letter__cta{margin:30px 0 0}

/* ------------------------------------------------------------------- form */
.scro-form-card{max-width:720px;margin:0 auto;padding:34px}
.scro-form-card__title{
	font-family:var(--scro-display);
	text-align:center;
	text-transform:uppercase;
	letter-spacing:.08em;
	font-size:18px;
	margin:0 0 8px;
}
.scro-form-card__text{
	text-align:center;
	color:var(--scro-muted);
	font-size:14px;
	margin:0 0 26px;
}
.scro-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.scro-field{margin:0}
.scro-field--full{grid-column:1/-1}
.scro-form input[type="text"],
.scro-form input[type="email"],
.scro-form select,
.scro-form textarea{
	width:100%;
	padding:12px 14px;
	border:1px solid var(--scro-line);
	border-radius:10px;
	font:inherit;
	font-size:14px;
	background:var(--scro-paper);
	color:var(--scro-ink);
}
.scro-form textarea{min-height:104px;resize:vertical}
.scro-form input:focus,
.scro-form select:focus,
.scro-form textarea:focus{
	outline:none;
	border-color:var(--scro-ink);
	box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.scro-form__actions{margin:20px 0 0;text-align:center}
.scro-form__note{
	margin:14px 0 0;
	font-size:13px;
	text-align:center;
	min-height:20px;
}
.scro-form__note.is-ok{color:var(--scro-ink);font-weight:600}
.scro-form__note.is-bad{color:#b00020}
.scro-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -------------------------------------------------------------------- faq */
.scro-faq__grid{
	display:grid;
	grid-template-columns:1.35fr .65fr;
	gap:48px;
	align-items:start;
}
.scro-faq__cat{margin-bottom:30px}
.scro-faq__catname{
	font-family:var(--scro-display);
	font-size:13px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--scro-muted);
	margin:0 0 12px;
}
.scro-faq__side{position:sticky;top:32px}
.scro-faq__figure{
	border-radius:var(--scro-radius);
	overflow:hidden;
	aspect-ratio:3/4;
	background:var(--scro-alt);
	margin-bottom:20px;
}
.scro-faq__figure img{width:100%;height:100%;object-fit:cover}

/* ----------------------------------------------------- image placeholders */
.scro-placeholder{
	display:block;
	width:100%;
	height:100%;
	min-height:80px;
	background:
		repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 10px,transparent 10px 20px),
		var(--scro-alt);
}
.scro-dark .scro-placeholder{
	background:
		repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px),
		#1c1c1c;
}

/* ----------------------------------------------------------------- reveal */
.scro-js .scro-reveal{opacity:0;transform:translateY(22px)}
.scro-js .scro-reveal.is-in{
	opacity:1;
	transform:none;
	transition:opacity .6s ease,transform .6s ease;
}
@media(prefers-reduced-motion:reduce){
	.scro-js .scro-reveal{opacity:1;transform:none}
	.scro-btn:hover{transform:none}
}

/* ------------------------------------------------------------- responsive */
@media(max-width:1000px){
	.scro-split,
	.scro-faq__grid{grid-template-columns:1fr;gap:36px}
	.scro-grid--4{grid-template-columns:repeat(2,1fr)}
	.scro-trust__grid{grid-template-columns:repeat(2,1fr)}
	.scro-trust__grid--logos{grid-template-columns:repeat(3,1fr)}
	.scro-pf__grid{grid-template-columns:repeat(4,1fr)}
	.scro-root--fit .scro-pf__grid{column-count:4}
	.scro-faq__side{position:static}
	.scro-faq__figure{max-width:340px;margin-left:auto;margin-right:auto}
}
@media(max-width:760px){
	.scro-sec{padding:52px 0}
	.scro-wrap{padding:0 18px}
	.scro-hero{padding:56px 0 46px}
	.scro-chart{padding:16px}
	.scro-video__play{width:52px;height:52px}
	.scro-video__play::after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}
	.scro-letter__salut{font-size:22px}
	.scro-letter__body p{font-size:15px}
	.scro-grid--2{grid-template-columns:1fr}
	.scro-pf__grid{grid-template-columns:repeat(3,1fr)}
	.scro-root--fit .scro-pf__grid{column-count:3}
	.scro-form__grid{grid-template-columns:1fr}
	.scro-logos__row{gap:26px}
	.scro-acc__body p{padding-right:0}

	/* The FAQ side image adds nothing on a phone and pushes the booking
	   button a full screen further down, so drop the image and keep the
	   button. */
	.scro-faq__figure{display:none}
	.scro-faq__side{margin-top:8px}
}
@media(max-width:520px){
	.scro-grid--4,
	.scro-trust__grid{grid-template-columns:1fr}
	.scro-trust__grid--logos{grid-template-columns:repeat(2,1fr);gap:12px}
	.scro-trust__logo{height:80px;padding:14px}
	.scro-form-card{padding:22px 16px}
	.scro-pf__grid{grid-template-columns:repeat(2,1fr);gap:10px}
	.scro-root--fit .scro-pf__grid{column-count:2;column-gap:10px}
	.scro-root--fit .scro-pf__tile{margin-bottom:10px}
	.scro-zoom{padding:12px}
	.scro-zoom__close{top:8px;right:8px;width:38px;height:38px;font-size:24px}
	.scro-zoom__nav{width:38px;height:38px;font-size:24px}

	/* Three stats will not sit on one line on a phone — let them wrap into
	   a tidy pair-plus-one instead of squeezing to an unreadable size. */
	.scro-stats{flex-wrap:wrap;gap:12px 8px}
	.scro-stats > div{flex:1 1 30%;min-width:88px}
	.scro-stats__v{font-size:17px}
	.scro-stats__l{font-size:10px}

	.scro-kicker{font-size:11px;letter-spacing:.1em;padding:6px 12px}
	.scro-rating{gap:8px;font-size:12px}
	.scro-case__body{padding:18px 16px 20px}
	.scro-step{grid-template-columns:42px 1fr;gap:12px}
	.scro-step__num{width:42px;height:42px;font-size:16px}
	.scro-step::before{left:20px;top:46px}
	.scro-acc__head{font-size:13px}
	.scro-btn{padding:13px 22px;font-size:14px}
	.scro-root button.scro-btn,
	.scro-root a.scro-btn{padding:13px 22px !important;font-size:14px !important}
}

@media(max-width:380px){
	.scro-wrap{padding:0 14px}
	.scro-title{font-size:22px}
	.scro-stats > div{flex:1 1 45%}
}