/* ==========================================================================
   valiant.biz (Valiant Agency): foundation stylesheet
   --------------------------------------------------------------------------
   Plan §5. Every value below is lifted from valiant.app's dark era so the two
   sites read as one company. Sources (Valiantbiz/website):
     css/style.css   body ground, container, header, dropdowns, drawer,
                     footer, buttons (byte-identical at 592dc230 and HEAD)
     css/funnel.css  §1 dark tokens (lines 29-69), .fnl-pill (223, 6549)
     css/site.css    W3c-1 heading ladder (1302-1488)
   Agency-only additions are marked AGENCY.

   Sections
     1. Tokens
     2. Base and layout
     3. Type
     4. Buttons, pill, links
     5. Header and desktop mega menus
     6. Mobile drawer (<=1200px)
     7. Footer
     8. Foundation shell (hero placeholder, specimen)
     9. Responsive
    10. Reduced motion (last)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS (plan §5.1)
   ========================================================================== */
:root {
	/* surfaces */
	--bg: #091811;              /* style.css:8, funnel --fnl-bg */
	--bg-deep: #050E0A;         /* funnel --fnl-rail */
	--bg-deepest: #020905;      /* style.css legal hero */
	--stage: #0A1410;           /* funnel --fnl-stage */
	--card: linear-gradient(180deg, #0C1B14 0%, #091811 100%);
	--card-solid: #0A1812;
	--tile: #070F0B;
	--glass: rgba(5, 14, 10, .45);
	--glass-border: rgba(255, 255, 255, .18);

	/* lines */
	--line: rgba(255, 255, 255, .07);
	--line-strong: rgba(255, 255, 255, .09);
	--line-hover: rgba(255, 255, 255, .16);
	--grad-border: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .02) 100%);

	/* ink */
	--ink: #FFFFFF;
	--ink-sub: #A9CDBB;
	--ink-muted: #83B59F;
	--ink-dim: #6E9585;         /* AGENCY: valiant.app's #5E8272 is 4.27:1 on --bg; this clears WCAG AA (4.5:1) on every surface */
	--ink-hover: #AED4C2;
	--ink-answer: #9DC3B0;

	/* accent */
	--green: #00FF8A;
	--green-07: rgba(0, 255, 138, .07);
	--green-10: rgba(0, 255, 138, .10);
	--green-22: rgba(0, 255, 138, .22);
	--red: #C01B1B;

	/* depth */
	--shadow-media: 0 30px 70px -40px rgba(0, 0, 0, .8);
	--shadow-menu: 0 0 160px rgba(0, 0, 0, .8);

	/* radii (funnel --fnl-r-*) */
	--r-card: 20px;
	--r-media: 18px;
	--r-tile: 12px;
	--r-chip: 14px;
	--r-pill: 32px;

	/* motion (funnel --fnl-ease-*) */
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);

	/* rhythm (AGENCY: more air than valiant.app's 100px, plan §5.3) */
	--secpad: 120px;
	--gap: 24px;
	--container: 1330px;
	--gutter: 25px;

	/* type */
	--font-display: "Rethink Sans", "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* header */
	--header-top: 30px;         /* style.css:571 */
	--header-z: 40;
}


/* ==========================================================================
   2. BASE AND LAYOUT
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	background-color: var(--bg);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;   /* clears the compact sticky bar */
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--ink-muted);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;   /* valiant.app style.css:4 body,html { font-weight: 300 } */
}

img, svg, video { display: block; max-width: 100%; }
/* The hidden attribute always wins, even over component display rules. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }

.container {
	max-width: var(--container);
	width: 100%;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	margin-left: auto;
	margin-right: auto;
}

.section { padding-top: var(--secpad); padding-bottom: var(--secpad); }
.section--deep { background-color: var(--bg-deep); }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Skip link: first focusable element on every page. */
.skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 100;
	padding: 12px 18px;
	border-radius: var(--r-pill);
	background: var(--green);
	color: #000;
	font-size: 14px; font-weight: 500;
	text-decoration: none;
	transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* One focus treatment everywhere (plan §18). */
:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
	border-radius: 6px;
}


/* ==========================================================================
   3. TYPE (plan §5.2; ladder from site.css W3c-1)
   ========================================================================== */
.h1, .h2, .h3, .h-cta {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	text-wrap: balance;
}
/* Type scale: the live valiant.app values, measured 2026-10-15 at 1440, 1200,
   991, 767 and 390 (h1 80/64/64/52/42, h2 60/45/45/42/33, card 31/25/25/25/24,
   lede 18/17/17/17/15, sub 18/17/17/17/16). Breakpoint steps are in section 9. */
.h1 {
	font-size: 80px;
	font-weight: 800;
	line-height: .92;
	letter-spacing: -0.035em;
}
.h2 {
	font-size: 60px;
	font-weight: 800;
	line-height: .92;
	letter-spacing: -0.035em;
}
.h3 {
	font-size: 31px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.035em;
}
/* Titles inside numbered lists and small columns sit a step below cards. */
.get__list .h3, .philosophy__col .h3, .about-block .h3 { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
.h-cta {
	font-size: 68px;
	font-weight: 800;
	line-height: .92;
	letter-spacing: -0.035em;
}
.colored { color: var(--green); }

.lede {
	margin: 0;
	max-width: 640px;
	color: var(--ink-sub);
	font-size: 18px;
	line-height: 1.45;
	font-weight: 400;
	letter-spacing: -0.03em;
}
.sub {
	margin: 0;
	max-width: 720px;
	color: var(--ink-sub);
	font-size: 18px;
	line-height: 1.5;
	font-weight: 300;
	letter-spacing: -0.03em;
}
.body { max-width: 60ch; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.caption { color: var(--ink-dim); font-size: 13px; line-height: 1.4; }


/* ==========================================================================
   4. BUTTONS, PILL, LINKS
   ========================================================================== */

/* --- Buttons: an exact copy of valiant.app's pre-light css/style.css
   (lines 660-857, 4115-4121, 4625-4636), behaviour from js/buttons.js
   (ported in js/biz.js). Ben, 2026-10-15: sizes, styling and animation must
   match valiant.app exactly. Do not restyle here; change valiant.app first. */
.filled-btn span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
}
.filled-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 43px;
	padding: 15px 25px;
	background-color: #00FF8A;
	border-radius: 32px;
	text-decoration: none;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 90%;
	color:#000000;
	font-weight: 500;
	border: 0;
	white-space: nowrap;
	cursor: pointer;
}

.outline-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 43px;
	border-radius: 250px;
	padding: 15px 25px;
	text-decoration: none;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 90%;
	position: relative;
	letter-spacing: -0.03em;
	border:1px solid rgba(255,255,255,.1);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	background-color:rgba(255,255,255,.02);
	color:rgba(255,255,255,.6);
	white-space: nowrap;
	cursor: pointer;
	transition:.3s ease all;
}
.outline-btn:hover:before{
	opacity:1;
}
.outline-btn:hover{
	color:rgba(255,255,255,.9);
}
.outline-btn:before{
	content:"";
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	transition:.3s ease all;
	border-radius: 250px;
	opacity:.3;
	background:linear-gradient(to top right, rgba(255,255,255,0) , rgba(255,255,255,.16));
}
.outline-btn>p{
	position: relative;
	z-index: 2;
	margin:0px;
}

.regular-btn>p>span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
	position: relative;
	top:1px;
}
.regular-btn p span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
}
.regular-btn p{
	display: flex;
	align-items: center;
	justify-content: center;
	margin:0px;
	position: relative;
	z-index: 2;
	text-shadow: 0px 0px 10px rgba(255,255,255,.4);
}
.regular-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  border-radius: 200px;
  position: relative;
  height: 43px;
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-decoration: none;

  background-color: #091811;
  background-image:
    linear-gradient(243.5deg, rgba(0, 255, 138, 0) 0%, rgba(0, 255, 138, 0.03) 40%, rgba(0, 255, 138, 0.24) 100%),
    linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30));
  background-blend-mode: normal, overlay;

  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.42px;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);

  transition:
    box-shadow 0.4s ease,
    transform 0.25s ease,
    text-shadow 0.4s ease;
}
.regular-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 200px;
  background-image:
    linear-gradient(243.5deg, rgba(0, 255, 138, 0.08) 0%, rgba(0, 255, 138, 0.18) 40%, rgba(0, 255, 138, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.regular-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 200px;
  padding: 1px;
  background-image: linear-gradient(
    243.5deg,
    rgba(0, 255, 138, 0.15) 0%,
    rgba(0, 255, 138, 0.5) 50%,
    #00ff8a 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  z-index: 1;
}
.regular-btn > * {
  position: relative;
  z-index: 2;
}
.regular-btn:hover::after {
  opacity: 1;
}
.regular-btn:hover::before {
  opacity: 1;
}
.regular-btn:hover {
  box-shadow:
    0 0 15px rgba(0, 255, 138, 0.4),
    0 0 30px rgba(0, 255, 138, 0.15),
    inset 0 0 16px rgba(0, 255, 138, 0.1);
  text-shadow: 0px 0px 16px rgba(255, 255, 255, 0.7);
}
.filled-btn{ position: relative; overflow: hidden; transition: padding .45s cubic-bezier(.65,0,.35,1); }
.filled-btn .fb-out{ transition: transform .45s cubic-bezier(.65,0,.35,1), opacity .3s ease; }
.filled-btn:hover .fb-out{ transform: translateX(60px); opacity: 0; }
.filled-btn .fb-in{
	position: absolute; top: 50%; left: 15px;
	display: inline-flex; align-items: center;
	color: #000;
	opacity: 0; transform: translate(-42px,-50%); pointer-events: none;
	transition: transform .45s cubic-bezier(.65,0,.35,1), opacity .3s ease;
}
.filled-btn .fb-in .fb-arrow{ display: block; height: 10px; width: auto; }
.filled-btn:hover .fb-in{ opacity: 1; transform: translate(0,-50%); }
.filled-btn:hover{ padding-left: 51px; padding-right: 12px; }

.regular-btn, .outline-btn{ --mx:50%; --my:50%; }
.btn-halo{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease; }
.regular-btn > .btn-halo{ z-index:1; background:radial-gradient(150px circle at var(--mx) var(--my), rgba(0,255,138,.7), rgba(0,255,138,.2) 42%, rgba(0,255,138,0) 72%); mix-blend-mode:screen; margin-left: 0px !important; }
.outline-btn > .btn-halo{ z-index:1; background:radial-gradient(140px circle at var(--mx) var(--my), rgba(255,255,255,.32), rgba(255,255,255,.09) 46%, rgba(255,255,255,0) 74%); }
.regular-btn:hover > .btn-halo, .outline-btn:hover > .btn-halo{ opacity:1; }
.regular-btn > .btn-inner, .outline-btn > .btn-inner{ position:relative; z-index:3; display:inline-flex; align-items:center; justify-content:center; }
.outline-btn{ overflow:hidden; }
.outline-btn .btn-arrow{
	display:inline-flex; align-items:center; flex:0 0 auto;
	max-width:0; margin-left:0; opacity:0; overflow:hidden; color:inherit;
	transition: max-width .35s ease, margin-left .35s ease, opacity .3s ease;
}
.outline-btn .btn-arrow svg{ width:12px; height:11px; display:block; }
.outline-btn:hover .btn-arrow{ max-width:16px; margin-left:7px; opacity:1; }
/* valiant.app gives a span inside the label margin-right: 10px (its icon sits
   before the text). Our arrow sits after it and is 0 wide at rest, so that
   margin pushed every label 5px off centre (Ben's point 12). */
.outline-btn > .btn-inner > p > .btn-arrow { margin-right: 0; }

.outline-btn{ border-color: transparent; }
.outline-btn::after{
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.outline-btn > .btn-inner>p>span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}
.outline-btn > .btn-inner>p{
	margin:0px;
	display:flex;
	align-items: center;
	justify-content: flex-start;
}
/* Inter's caps sit high in a 90% line box; 2px of top padding on the centred
   inner puts the ink on the button's optical centre (Ben's point 27). */
.outline-btn > .btn-inner{ padding-top: 2px; }
.regular-btn p span>img , .filled-btn span>img{
	position: static!important;
}
.filled-btn:focus-visible, .outline-btn:focus-visible, .regular-btn:focus-visible { outline: 2px solid #00FF8A; outline-offset: 3px; }

/* --- AGENCY tertiary: the Webflow "Read more" text link, plan §5.4. --- */
.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink-sub);
	font-size: 15px;
	line-height: 1.2;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(169, 205, 187, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: color .25s ease, text-decoration-color .25s ease;
}
.text-link:hover { color: var(--ink); text-decoration-color: var(--green); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* --- Section pill: funnel.css .fnl-pill (223 + 6549 merged). --- */
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	height: 30px;
	margin: 0 0 18px;
	padding: 0 14px;
	border: 1px solid var(--green-22);
	border-radius: 999px;
	background: var(--green-07);
	color: var(--green);
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: .10em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* External-link arrow on cross-site links (plan §7.5). */
.ext-icon { display: inline-block; width: 10px; height: 10px; margin-left: 6px; flex: 0 0 auto; opacity: .7; }


/* ==========================================================================
   5. HEADER AND DESKTOP MEGA MENUS (plan §7.1, §7.2)
   Geometry from style.css 562-664: absolute, top 30px, logo left, menu
   centred absolutely, actions right, 14px links in --ink-muted.
   ========================================================================== */
.site-header {
	position: absolute;
	left: 0; top: var(--header-top);
	width: 100%;
	z-index: var(--header-z);
}
.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 50px;           /* valiant.app's measured desktop bar height */
}
.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border-radius: 6px;
}
.site-header__logo img { width: 111px; height: 30px; transition: filter .35s ease; }
.site-header__logo:hover img { filter: drop-shadow(0 0 12px rgba(255, 255, 255, .55)); }

.site-nav {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
}
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0; padding: 0;
	list-style: none;
}
.site-nav__item { position: static; padding: 15px 0; }
.site-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-muted);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: .9;
	font-weight: 400;
	letter-spacing: -0.03em;
	white-space: nowrap;
	cursor: pointer;
	transition: color .3s ease;
}
.site-nav__trigger:hover,
.site-nav__item[data-open] .site-nav__trigger { color: var(--ink-hover); }
.site-nav__item.is-current .site-nav__trigger { color: var(--ink); }
.site-nav__chev { width: 8px; height: auto; transition: transform .3s ease, filter .3s ease; }
.site-nav__item[data-open] .site-nav__chev { transform: rotate(180deg); filter: brightness(1.3); }

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
	flex: 0 0 auto;
}
.portal-link {
	display: inline-flex;
	align-items: center;
	color: var(--ink-muted);
	font-size: 14px;
	line-height: .9;
	letter-spacing: -0.03em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .3s ease;
}
.portal-link:hover { color: var(--ink-hover); }

/* --- Mega panels: style.css .header__dropdown (136-152) scaled up. Panels
   hang off the bar (not the item), centred, so every menu opens in the same
   place. The ::before bridge keeps hover alive across the 16px gap. --- */
.mega {
	position: absolute;
	left: 50%;
	top: 100%;
	/* The 16px top padding is the hover bridge between trigger and panel: it
	   belongs to the panel, so the pointer never leaves the open item. */
	padding-top: 16px;
	width: min(var(--mega-w, 900px), calc(100vw - 2 * var(--gutter)));
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity .18s ease, transform .18s var(--ease-out), visibility 0s linear .18s;
	z-index: 2;
}
.mega__inner {
	max-height: 70vh;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 24px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-media);
	background: linear-gradient(to bottom, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25)), rgba(5, 14, 10, .94);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	box-shadow: var(--shadow-menu);
}
.site-nav__item[data-open] > .mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .18s ease, transform .18s var(--ease-out);
}
/* No-JS fallback: hover and keyboard focus still open the panels. */
html.no-js .site-nav__item:hover > .mega,
html.no-js .site-nav__item:focus-within > .mega {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

.mega--expertise { --mega-w: 980px; }
.mega--services { --mega-w: 920px; }
.mega--work { --mega-w: 860px; }
.mega--technology { --mega-w: 1000px; }
.mega--resources { --mega-w: 760px; }

.mega__label {
	margin: 0 0 12px;
	color: var(--ink-dim);
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: .10em;
	text-transform: uppercase;
}
.mega__list { margin: 0; padding: 0; list-style: none; }
.mega__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--ink-muted);
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.mega__link:hover, .mega__link:focus-visible { background-color: rgba(255, 255, 255, .04); color: var(--ink); }
.mega__link img { width: 16px; height: 16px; flex: 0 0 16px; transition: filter .3s ease; }
.mega__link:hover img { filter: brightness(1.3); }
.mega__link--all { color: var(--ink-sub); font-weight: 500; }
.mega__link--all::after {
	content: "";
	width: 12px; height: 11px;
	margin-left: 2px;
	background: currentColor;
	-webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat;
	mask: url("../img/arrow-right.svg") center / contain no-repeat;
}
.mega__desc { display: block; margin-top: 4px; color: var(--ink-dim); font-size: 13px; line-height: 1.35; letter-spacing: 0; }
.mega__link--stacked { display: block; padding: 12px; }
.mega__link--stacked .mega__title { color: var(--ink); font-size: 15px; font-weight: 500; }
.mega__link--stacked:hover .mega__desc { color: var(--ink-muted); }
.mega__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	color: var(--ink-dim);
	font-size: 13px;
}
.mega__cols { display: grid; gap: 24px; }
.mega__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__cols > * + * { border-left: 1px solid var(--line); padding-left: 24px; }

/* Expertise: category rail | specialties | aside */
.mega-x { display: grid; grid-template-columns: 250px minmax(0, 1fr) 240px; gap: 24px; }
.mega-x__rail { margin: 0; padding: 0 24px 0 0; list-style: none; border-right: 1px solid var(--line); }
.mega-x__cat {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--ink-muted);
	font-size: 14px;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.mega-x__cat img { width: 20px; height: 20px; flex: 0 0 20px; }
.mega__link--ico { display: flex; align-items: center; gap: 12px; }
.mega__ico { width: 20px; height: 20px; flex: 0 0 20px; }
.mega-x__cat[data-active] { background-color: rgba(255, 255, 255, .05); color: var(--ink); }
.mega-x__cat[data-active] img { filter: brightness(1.4); }
.mega-x__panel[hidden] { display: none; }
.mega-x__panel .mega__list { display: grid; gap: 2px; }
.mega-x__aside {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-tile);
	background: var(--card);
}
.mega-x__aside .mega__label, .mega-x__aside-name, .mega-x__aside-blurb { display: block; }
.mega-x__aside { height: 100%; text-decoration: none; transition: border-color .2s ease; }
.mega-x__aside:hover { border-color: var(--line-hover); }
.mega-x__aside .text-link { align-self: flex-start; }
/* Column labels line up with the 12px-padded links beneath them. */
.mega__cols .mega__label, .mega-x__panel .mega__label { padding-left: 12px; }
.mega-x__aside-name { margin: 0 0 8px; color: var(--ink); font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.mega-x__aside-blurb { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.45; }
.mega-x__aside { justify-content: flex-start; gap: 14px; padding: 12px 12px 18px; }
.mega-x__aside-media { display: block; height: 132px; overflow: hidden; border-radius: 10px; background: var(--tile); }
.mega-x__aside-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .6s var(--ease-out); }
.mega-x__aside:hover .mega-x__aside-media img { transform: scale(1.03); }
.mega-x__aside-body { padding: 0 6px; }
.mega-x__aside .text-link { margin: auto 6px 0; }
.mega-x__aside-blurb b { color: var(--green); font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-right: 4px; }

/* Technology pages: portal screenshot strip */
.tech-strip__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tech-strip__shot { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-tile); background: var(--tile); }
.tech-strip__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@media (max-width: 767px) { .tech-strip__row { grid-template-columns: 1fr; } }
/* Technology: four module cards */
.mega-t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mega-t__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 150px;
	padding: 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-tile);
	background: var(--card);
	color: var(--ink-muted);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.mega-t__card img { width: 22px; height: 22px; }
.mega-t__card strong { color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.mega-t__card:hover { border-color: var(--line-hover); color: var(--ink-sub); }

/* Resources: list + product aside */
.mega-r { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.mega-r__aside span { white-space: nowrap; }
.mega__ico--sm { width: 16px; height: 16px; flex-basis: 16px; }
.mega__ico--logo { object-fit: contain; }
.mega-r .mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.mega-r__aside {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-tile);
	background: var(--card);
	color: var(--ink-muted);
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
	transition: border-color .2s ease;
}
.mega-r__aside:hover { border-color: var(--line-hover); }
.mega-r__aside strong { display: inline-flex; align-items: center; color: var(--ink); font-size: 16px; font-weight: 500; }

/* Backdrop behind open menus (Webflow precedent, plan §7.2). */
.mega-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--header-z) - 1);
	background: rgba(2, 9, 5, .5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility 0s linear .2s;
	pointer-events: none;
}
.mega-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; }

/* --- Compact sticky bar (AGENCY, plan §7.1): after 120px of scroll the
   header pins to the top on a dark glass ground. --- */
.site-header.is-stuck {
	position: fixed;
	top: 0;
	padding: 10px 0;
	background: rgba(9, 24, 17, .92);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--line);
	animation: header-in .35s var(--ease-out) both;
}
@keyframes header-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Hamburger: style.css .menu-btn (10731-10760). Hidden on desktop. */
.menu-btn {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 34px; height: 34px;
	padding: 0;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: linear-gradient(to top right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07));
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	cursor: pointer;
}
.menu-btn span {
	display: block;
	width: 16px; height: 2px;
	border-radius: 2px;
	background: #fff;
}


/* ==========================================================================
   6. MOBILE DRAWER (<=1200px; plan §7.3)
   Panel from style.css 10762-10806: min(420px, 86vw), dark gradient, blur 24,
   left hairline, slide from the right, 50% black backdrop.
   ========================================================================== */
.drawer {
	position: fixed;
	top: 0; right: 0;
	z-index: 60;
	width: min(420px, 86vw);
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(12, 28, 20, .97), rgba(7, 18, 13, .99));
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border-left: 1px solid rgba(255, 255, 255, .08);
	box-shadow: -40px 0 120px rgba(0, 0, 0, .6);
	transform: translateX(105%);
	visibility: hidden;
	transition: transform .45s cubic-bezier(.6, 0, .2, 1), visibility 0s linear .45s;
}
.drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform .45s cubic-bezier(.6, 0, .2, 1);
}
.drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 12px;
}
.drawer__top img { width: 111px; height: 30px; }
.drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	background: rgba(255, 255, 255, .03);
	color: #fff;
	cursor: pointer;
}
.drawer__close svg { width: 14px; height: 14px; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 24px 24px; overscroll-behavior: contain; }
.drawer__foot {
	display: grid;
	gap: 10px;
	padding: 16px 24px max(20px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
}
.drawer__foot .filled-btn, .drawer__foot .outline-btn { width: 100%; }

.drawer-acc { border-bottom: 1px solid var(--line); }
.drawer-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	list-style: none;
	cursor: pointer;
}
.drawer-acc > summary::-webkit-details-marker { display: none; }
.drawer-acc > summary::after,
.drawer-sub > summary::after {
	content: "";
	width: 12px; height: 8px;
	background: currentColor;
	-webkit-mask: url("../img/header-arrow.svg") center / contain no-repeat;
	mask: url("../img/header-arrow.svg") center / contain no-repeat;
	opacity: .7;
	transition: transform .25s ease;
}
.drawer-acc[open] > summary::after,
.drawer-sub[open] > summary::after { transform: rotate(180deg); }
.drawer-acc__body { padding: 0 0 16px; }
.drawer-acc__group + .drawer-acc__group { margin-top: 12px; }
.drawer-acc__label {
	margin: 8px 0 4px;
	color: var(--ink-dim);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .10em;
	text-transform: uppercase;
}
.drawer-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink-muted);
	font-size: 15px;
	text-decoration: none;
}
.drawer-link:hover { color: var(--ink); }
.drawer-link--all { color: var(--ink-sub); font-weight: 500; }
.drawer-sub { border-top: 1px solid rgba(255, 255, 255, .04); }
.drawer-sub > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	color: var(--ink-sub);
	font-size: 15px;
	list-style: none;
	cursor: pointer;
}
.drawer-sub > summary::-webkit-details-marker { display: none; }
.drawer-sub > summary span { display: inline-flex; align-items: center; gap: 10px; }
.drawer-sub > summary img { width: 18px; height: 18px; }
.drawer-sub__body { padding: 0 0 10px 28px; }

.drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 59;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
}
.drawer-backdrop.is-visible { opacity: 1; visibility: visible; transition: opacity .35s ease; }

body.nav-lock { overflow: hidden; }
/* Without JavaScript the drawer cannot open: hide its button. The footer
   carries every navigation link. */
html.no-js .menu-btn { display: none !important; }
/* Without JS the tabs cannot switch: show every panel in order, drop the tab row. */
html.no-js [role="tabpanel"][hidden] { display: block !important; }
html.no-js [role="tabpanel"] + [role="tabpanel"] { margin-top: 48px; }
html.no-js [role="tablist"] { display: none !important; }


/* ==========================================================================
   7. FOOTER (plan §7.4; style.css 188-273 + socials 14354-14375)
   ========================================================================== */
/* Values copied from valiant.app style.css 188-273 (footer, .top__footer,
   .left-col, .right-col, .el, .bottom__footer); class names are the agency's. */
.site-footer {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	background: var(--bg);
}
.site-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; max-width: 260px; }
.site-footer__brand > a { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 25px; transition: .3s ease all; }
.site-footer__brand > a:hover { opacity: .7; }
.site-footer__brand img { width: 111px; height: 30px; }
.site-footer__slogan,
.site-footer__meta {
	margin: 0;
	font-size: 12px;
	line-height: 110%;
	color: #5E8272;
	letter-spacing: -0.03em;
}
.site-footer__slogan { margin-bottom: 10px; }
.site-footer__cols {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}
.site-footer__title {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 90%;
	color: #83B59F;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.site-footer__list { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.site-footer__list > li { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 12px; }
.site-footer__list > li:last-child { margin-bottom: 0; }
.site-footer__list a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-size: 12px;
	line-height: normal;
	color: #5E8272;
	letter-spacing: -0.03em;
	transition: .3s ease all;
}
.site-footer__list a:hover { color: #83B59F; }
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 120px;
	padding: 40px 0;
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal a, .site-footer__copy {
	margin: 0;
	font-size: 12px;
	line-height: 110%;
	letter-spacing: -0.03em;
	color: #5E8272;
	text-decoration: none;
	transition: .3s ease all;
}
.site-footer__legal a:hover { color: #83B59F; }
.footer-socials { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(255, 255, 255, .04);
	transition: border-color .3s ease, background-color .3s ease;
}
.footer-socials a:hover { border-color: rgba(0, 255, 138, .55); background: rgba(0, 255, 138, .08); }
.footer-socials img { width: 20px; height: 20px; filter: brightness(0) invert(1) opacity(.92); }


/* ==========================================================================
   8. FOUNDATION SHELL (Phase 1 only: replaced by the real home in Phase 3)
   ========================================================================== */
.not-found { min-height: 80svh; display: flex; align-items: center; padding: 180px 0 120px; }
.not-found__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* Specimen page */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.spec-swatch { border: 1px solid var(--line-strong); border-radius: var(--r-tile); overflow: hidden; background: var(--bg-deep); }
.spec-swatch__chip { height: 72px; }
.spec-swatch__meta { padding: 10px 12px; font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.spec-swatch__meta b { display: block; color: var(--ink); font-weight: 500; }
.spec-row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.spec-row > span { color: var(--ink-dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* Library review page (internal) */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 24px; }
.lib-tile { margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-tile); overflow: hidden; background: var(--tile); }
.lib-tile img { width: 100%; height: 240px; object-fit: cover; object-position: top; background: var(--stage); }
.lib-tile figcaption { display: grid; gap: 4px; padding: 10px 12px 12px; font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.lib-tile b { color: var(--ink); font-weight: 500; }
.lib-flag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 196, 0, .12); color: #F5C451; font-size: 11px; }
.lib-table { width: 100%; max-width: 720px; margin-top: 32px; border-collapse: collapse; font-size: 14px; }
.lib-table th, .lib-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.lib-table th { color: var(--ink-dim); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.lib-table td { color: var(--ink-muted); }
.lib-excluded { margin: 16px 0 0; padding-left: 18px; color: var(--ink-muted); font-size: 14px; line-height: 1.7; }
.lib-excluded code { color: var(--ink-sub); }


/* ==========================================================================
   8b. SECTIONS (plan §11). Shared by every page; compositions differ so
   neighbouring sections never repeat a layout (plan §5.6).
   ========================================================================== */

/* --- section head --- */
.sec-head { max-width: 900px; margin-bottom: 56px; }
.sec-head .sub { margin-top: 20px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .pill { margin-left: auto; margin-right: auto; }
.sec-head--center .sub { margin-left: auto; margin-right: auto; }

/* --- hero --- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(max(720px, 100svh), 920px);
	padding: 150px 0 96px;
	overflow: hidden;
	isolation: isolate;
	background: var(--bg);
}
.hero--compact { min-height: min(max(620px, 80svh), 760px); }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__poster, .hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__film { opacity: 0; transition: opacity .8s var(--ease-out); }
.hero__film.is-playing { opacity: 1; }
.hero__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(9, 24, 17, .55) 0%, rgba(9, 24, 17, .35) 40%, rgba(9, 24, 17, .92) 100%),
		radial-gradient(70% 60% at 50% 45%, rgba(9, 24, 17, 0), rgba(9, 24, 17, .6));
}
/* Reel heroes (home, About, every expertise and specialty page): the montage
   film is softened and veiled so the headline carries, as on the Webflow
   header and the pre-light valiant.app About hero (black 50%, blur 3px). */
.hero--reel .hero__poster, .hero--reel .hero__film { filter: blur(3px); transform: scale(1.04); }
.hero--reel .hero__scrim { background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 55%, rgba(9, 24, 17, .96) 100%); }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* valiant.app hero rhythm (style.css 3527-3545): headline, 30px, sub, 40px,
   buttons 15px apart, then the Trustpilot badge. */
.hero__inner .crumbs { margin-bottom: 26px; }
.hero__inner .h1 { max-width: 1040px; margin: 0 0 30px; }
.hero__inner .lede { margin: 0 auto; max-width: 640px; }
.hero__inner .btn-row { justify-content: center; gap: 15px; margin-top: 40px; }
.hero__inner .fnl-tp { margin-top: 28px; }
.hero__inner .lede + .fnl-tp { margin-top: 30px; }


/* --- marquee (CSS only, pauses on hover and focus) --- */
.marquee {
	--dur: 42s;
	--gap: 56px;
	display: flex;
	gap: var(--gap);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
	display: flex; align-items: center; gap: var(--gap);
	flex: 0 0 auto; min-width: 100%;
	margin: 0; padding: 0; list-style: none;
	animation: marquee var(--dur) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
/* Ben 2026-10-15: the trusted wall keeps moving under the pointer (.marquee--nopause). */
.marquee:not(.marquee--nopause):hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }

.logo-cell { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 120px; height: 44px; }
.logo-cell--text { color: var(--ink-muted); font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.logo-mono { display: block; height: 28px; max-width: 150px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; }
/* Badge logos keep their own colours, desaturated: white-filled they turn into a solid shape. */
.logo-mono--wf-colour { filter: grayscale(1) brightness(1.08); opacity: .8; border-radius: 6px; }

/* --- logo rail (valiant.app .fnl-logos) --- */
.logo-rail { padding: 34px 0; background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-rail__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; }
.logo-rail__stat { display: grid; gap: 4px; margin: 0; padding-right: 48px; border-right: 1px solid var(--line); }
.logo-rail__stat b { color: var(--ink); font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.logo-rail__stat span { color: var(--ink-dim); font-size: 13px; }

/* --- manifesto (scroll reveal where supported) --- */
.manifesto__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.manifesto__head { position: sticky; top: 120px; }
.manifesto__head .sec-head { margin-bottom: 0; }
.manifesto__text { display: grid; gap: 40px; }
/* Large display type that lights up word by word as it scrolls through the
   view, and dims again on the way back up (Webflow's About, Ben's point 32).
   biz.js 6b4 sets each word's colour from the scroll position; without JS or
   with reduced motion the text is simply white. */
.manifesto__text p { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 38px; line-height: 1.2; font-weight: 500; letter-spacing: -0.025em; }
.js .manifesto__text[data-word-reveal] .mw { color: #2c3d35; }
@media (prefers-reduced-motion: reduce) { .js .manifesto__text[data-word-reveal] .mw { color: var(--ink); } }
.manifesto__head .sec-head__sub, .manifesto__head .sub { max-width: 420px; }

/* --- services bento --- */
.bento { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: var(--gap); }
.svc {
	position: relative;
	display: flex; flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-card);
	background: var(--card);
	transition: border-color .25s ease;
}
.svc:hover { border-color: var(--line-hover); }
.svc--wide { grid-column: span 14; }
.svc--narrow { grid-column: span 10; }
/* Ben's point 37: Media Buying gets a little more room, Ad Creatives a little less. */
.bento > .svc--wide:first-child { grid-column: span 13; }
.bento > .svc--wide:first-child + .svc--narrow { grid-column: span 11; }
.svc--cta { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 220px; }
.svc__visual { position: relative; height: 300px; overflow: hidden; background: var(--stage); border-bottom: 1px solid var(--line); }
.svc__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 30px 32px; }
.svc__body .body { margin: 0; }
.svc__eyebrow { margin: 0; color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }
.svc--cta .svc__body { position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding: 40px; }
.svc--cta .h3 { font-size: 34px; flex: 0 0 auto; }
.svc--cta .body { flex: 1 1 320px; max-width: 46ch; }
.svc__blob {
	position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(0, 255, 138, .28), rgba(0, 255, 138, 0) 65%);
	pointer-events: none;
}
.svc__shot { position: absolute; inset: 24px 24px auto; width: calc(100% - 48px); height: calc(100% - 24px); object-fit: cover; object-position: top left; border-radius: 12px 12px 0 0; box-shadow: var(--shadow-media); }
.svc__shot--page { object-position: top center; }
.svc__emails { position: absolute; inset: 24px 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc__emails img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10px 10px 0 0; box-shadow: var(--shadow-media); }
.fan { position: absolute; inset: 0; }
.fan__card { position: absolute; top: 28px; width: 150px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: var(--shadow-media); transition: transform .6s var(--ease-out); }
.fan__card--1 { left: calc(50% - 230px); transform: rotate(-7deg); top: 46px; }
.fan__card--2 { left: calc(50% - 75px); z-index: 1; }
.fan__card--3 { left: calc(50% + 80px); transform: rotate(7deg); top: 46px; }
.svc:hover .fan__card--1 { transform: rotate(-10deg) translateX(-8px); }
.svc:hover .fan__card--3 { transform: rotate(10deg) translateX(8px); }

/* --- case studies --- */
.cases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.cases__head .sec-head { margin-bottom: 0; }
.case-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 280px; gap: var(--gap); }
.case-card { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line-strong); background: var(--stage); color: inherit; text-decoration: none; isolation: isolate; }
.case-card:nth-child(1) { grid-column: 1 / 9; grid-row: 1 / 3; }
.case-card:nth-child(2) { grid-column: 9 / 13; grid-row: 1; }
.case-card:nth-child(3) { grid-column: 9 / 13; grid-row: 2; }
.case-card:nth-child(4) { grid-column: 1 / 7; grid-row: 3; }
.case-card:nth-child(5) { grid-column: 7 / 13; grid-row: 3; }
.case-card__media { position: absolute; inset: 0; z-index: -1; }
/* Case banners carry their own logo and brand colour: dimmed to a coloured
   ground so the card's own logo, metric and link stay legible. */
.case-card__bg { width: 100%; height: 100%; object-fit: cover; filter: brightness(.52) saturate(1.1); transition: transform .6s var(--ease-out), filter .6s var(--ease-out); }
.case-card:hover .case-card__bg { filter: brightness(.6) saturate(1.15); }
.case-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 14, 10, 0) 30%, rgba(5, 14, 10, .92) 100%); }
.case-card__works { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; }
.case-card__work { width: 92px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8); transition: transform .6s var(--ease-out); }
.case-card--feature .case-card__works { top: 28px; right: 28px; gap: 14px; }
.case-card--feature .case-card__work { width: 168px; }
.case-card--feature .case-card__work--2 { transform: translateY(24px); }
.case-card--feature:hover .case-card__work--2 { transform: translateY(18px); }
.case-card__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 26px; }
.case-card__logo { max-height: 24px; max-width: 130px; margin-bottom: 4px; opacity: .95; }
.case-card__client { color: var(--ink-sub); font-size: 13px; letter-spacing: .02em; }
.case-card__metric { color: var(--ink-sub); font-size: 15px; line-height: 1.35; max-width: 40ch; transition: transform .6s var(--ease-out); }
.case-card__metric b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; }
.case-card--feature .case-card__metric b { font-size: 56px; }
.case-card__link { margin-top: 4px; font-size: 14px; }
.case-card:hover .case-card__bg { transform: scale(1.03); }
.case-card:hover .case-card__work { transform: translateY(-6px); }
.case-card:hover .case-card__metric { transform: translateY(-4px); }

/* --- stats --- */
/* The stat grid sits under the headline and the running revenue figure to its
   right (Ben's point 35: no empty space under the headline). */
.stats__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.stats__lead { display: grid; gap: 10px; margin: 0; justify-items: end; text-align: right; }
.stats__lead .stats__num { color: var(--ink); font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 84px); font-weight: 700; line-height: .9; letter-spacing: -0.04em; white-space: nowrap; }   /* the full counter figure (11 characters) has to fit its column */
.stats__lead > span { color: var(--ink-sub); font-size: 18px; }
.stats__list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.stats__list li { display: grid; gap: 6px; align-content: start; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.stats__list li:nth-child(odd) { border-right: 1px solid var(--line); }
.stats__list li:nth-child(even) { padding-left: 24px; }
.stats__list b { color: var(--green); font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.stats__list li > span { color: var(--ink-muted); font-size: 15px; line-height: 1.4; }

/* --- process stepper --- */
.steps__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.steps__tab {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 22px 16px 22px 0;
	border: 0; background: none;
	color: var(--ink-muted); font-size: 14px; line-height: 1.3; text-align: left;
	cursor: pointer; transition: color .25s ease;
}
.steps__tab::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; transition: background-color .25s ease; }
.steps__tab:hover { color: var(--ink-hover); }
.steps__tab[aria-selected="true"] { color: var(--ink); }
.steps__tab[aria-selected="true"]::before { background: var(--green); }
.steps__num { color: var(--ink-dim); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.steps__tab[aria-selected="true"] .steps__num { color: var(--green); }
.steps__panels { margin-top: 40px; }
.steps__panel { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.steps__panel-num { grid-row: span 2; margin: 0; color: rgba(0, 255, 138, .14); font-family: var(--font-display); font-size: 140px; font-weight: 800; line-height: .8; letter-spacing: -0.05em; }
.steps__panel .h3 { margin-bottom: 14px; }
.steps__panel .body { margin: 0; font-size: 18px; max-width: 56ch; }

/* --- expertise (hairline grid, not cards) --- */
.xgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.xgrid > li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xcard { position: relative; display: grid; gap: 12px; height: 100%; padding: 32px 30px 36px; color: inherit; text-decoration: none; transition: background-color .25s ease; }
.xcard:hover { background: rgba(255, 255, 255, .025); }
.xcard__icon { width: 22px; height: 22px; }
.xcard__name { color: var(--ink); font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.xcard__line { color: var(--ink-muted); font-size: 15px; line-height: 1.5; max-width: 38ch; }
.xcard__go { position: absolute; top: 34px; right: 30px; width: 14px; height: 13px; background: var(--ink-dim); -webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat; mask: url("../img/arrow-right.svg") center / contain no-repeat; transition: transform .25s ease, background-color .25s ease; }
.xcard:hover .xcard__go { background: var(--green); transform: translateX(4px); }
.xgrid__cta { grid-column: span 2; }
.xcard--cta { align-content: center; justify-items: start; background: radial-gradient(120% 140% at 100% 100%, rgba(0, 255, 138, .12) 0%, rgba(0, 255, 138, 0) 55%); }
.xcard--cta:hover { background: radial-gradient(120% 140% at 100% 100%, rgba(0, 255, 138, .12) 0%, rgba(0, 255, 138, 0) 55%); }
.xcard--cta .filled-btn { margin-top: 6px; }

/* --- trusted wall --- */
.trusted .sec-head { margin-bottom: 48px; }
.trusted__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.trusted .logo-mono { height: 32px; }

/* --- story --- */
.story__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.story__visual { position: relative; height: 560px; }
.story__img { position: absolute; width: 40%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-media); border: 1px solid var(--line-strong); box-shadow: var(--shadow-media); }
.story__img--1 { left: 0; top: 60px; }
.story__img--2 { left: 30%; top: 0; z-index: 1; }
.story__img--3 { left: 60%; top: 90px; }
.story__text .sec-head { margin-bottom: 24px; }
.story__text .body { margin: 0 0 24px; font-size: 18px; }

/* --- examples rails --- */
.examples__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rail-nav { display: flex; gap: 10px; margin-bottom: 56px; }
.rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255, 255, 255, .02); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.rail-btn:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, .05); }
.rail-btn svg { width: 12px; height: 11px; }
.examples__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }   /* the rails scroll; they must not size the column */
.rail__track {
	display: flex; gap: 16px;
	overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;   /* no in-row vertical scroll (Ben's point 10) */
	scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	padding: 4px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > .tile { flex: 0 0 auto; width: 236px; scroll-snap-align: start; }
.rail__track > .tile--email, .rail__track > .tile--square { width: 300px; }

/* --- tiles --- */
.tile {
	position: relative; display: block; overflow: hidden;
	padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-tile);
	background: var(--tile); color: inherit; cursor: pointer; text-align: left;
	transition: border-color .25s ease, transform .4s var(--ease-out);
}
.tile:hover { border-color: var(--line-hover); }
.tile--portrait { aspect-ratio: 9 / 16; }
.tile--email { aspect-ratio: 3 / 4; }
.tile--square { aspect-ratio: 4 / 5; }
.tile--landscape { aspect-ratio: 4 / 3; }
.tile__poster, .tile__teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--email .tile__poster, .tile--landscape .tile__poster { object-position: top; }
.tile__teaser { opacity: 0; transition: opacity .3s ease; }
.tile.is-playing .tile__teaser { opacity: 1; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, .7) 100%); pointer-events: none; }
.tile__chip { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tile__foot { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; align-items: center; }
.tile__logo { max-height: 20px; max-width: 110px; opacity: .92; }
.tile__name { color: var(--ink); font-size: 13px; font-weight: 500; }
.tile__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(5, 14, 10, .5); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: .9; transition: opacity .25s ease, transform .25s ease; }
.tile__play::after { content: ""; position: absolute; left: 21px; top: 17px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tile.is-playing .tile__play { opacity: 0; transform: scale(.9); }
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
/* One height per row: every tile in a grid is 4:5 (emails crop to the top).
   Landscape tiles keep 4:3; grids that hold them hold only page work. */
.tile-grid .tile--portrait, .tile-grid .tile--email, .tile-grid .tile--square { aspect-ratio: 4 / 5; }
.tile-grid__note { margin-top: 20px; }
/* Case galleries with one or two pieces: sized to the work, not stretched. */
.tile-grid--n1 { grid-template-columns: minmax(0, 420px); }
.tile-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }

/* --- reviews wall --- */
.reviews__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.marquee--reviews { --gap: 20px; }
.marquee--reviews .marquee__track { align-items: flex-start; }
.rv { display: flex; flex-direction: column; gap: 14px; width: 420px; flex: 0 0 auto; padding: 26px; border: 1px solid var(--line-strong); border-radius: var(--r-media); background: var(--card-solid); }
.rv__stars { display: inline-flex; gap: 3px; }
.rv__stars i { width: 14px; height: 14px; background: var(--ink-dim); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.rv__stars i.on { background: var(--green); }
.rv__stars i.half { background: linear-gradient(90deg, var(--green) 50%, var(--ink-dim) 50%); }
.rv__pull { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.rv__body { margin: 0; color: var(--ink-sub); font-size: 15px; line-height: 1.55; }
.rv__who { display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 8px; font-size: 13px; }
.rv__who img, .rv__mono { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 36px; }
.rv__mono { display: inline-flex; align-items: center; justify-content: center; background: var(--green-10); color: var(--green); font-weight: 600; }
.rv__who > span { display: grid; gap: 2px; color: var(--ink-dim); }
.rv__who b { color: var(--ink); font-weight: 500; }
.reviews__foot { display: flex; justify-content: center; margin-top: 40px; }

/* --- philosophy --- */
.philosophy__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 40px; }
.philosophy__col { padding-top: 24px; border-top: 1px solid var(--line); }
.philosophy__col .h3 { margin-bottom: 12px; font-size: 22px; }
.philosophy__col .body { margin: 0; }

/* --- closing CTA band --- */
/* --- closing CTA: valiant.app .cta__wrapper.cta-team, exact (see ctaBand) --- */
.cta__wrapper {
	position: relative;
	z-index: 2;
	padding-top: 120px;
	padding-bottom: 120px;
	text-align: center;
	overflow: hidden;
}
.cta__wrapper:before {
	content: "";
	position: absolute;
	left: 0px; top: 0px;
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,.25);
	z-index: 1;
}
.cta__wrapper.cta-team video, .cta__wrapper.cta-team .cta__film {
	position: absolute;
	left: 0px; top: 0px;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.cta__wrapper .outer__cta { position: relative; z-index: 4; max-width: 800px; margin-left: auto; margin-right: auto; }
/* The film's top edge met the band above as a hard line (Ben's point 4): the
   film is held a step darker and a fade in the previous band's colour runs
   over its first 220px. FAQ is the deep band, everything else the page ground. */
.cta__wrapper { --cta-fade: #091811; }
.faq__wrapper + .cta__wrapper, .section--deep + .cta__wrapper { --cta-fade: #050E0A; }
.cta__wrapper .cta__film { filter: brightness(.78); }
.cta__wrapper .cta__fade { position: absolute; left: 0; top: 0; width: 100%; height: 220px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--cta-fade) 0%, rgba(9, 24, 17, 0) 100%); }
.cta__wrapper .outer__cta>.h2-title { margin-top: 0; margin-bottom: 30px; }
.cta__wrapper .outer__cta>p {
	margin: 0px;
	font-size: 16px;
	line-height: 130%;
	letter-spacing: -0.03em;
	color: rgba(255,255,255,.6);
}
.cta__wrapper .outer__cta .btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 40px;
	margin-bottom: 30px;
}
.cta__wrapper .outer__cta .btns:last-child { margin-bottom: 0px; }
.info__small {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 36px;
	padding-left: 12px;
	padding-right: 12px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.3);
}
.info__small>span { display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; }
.info__small>p { margin: 0px; font-size: 14px; line-height: 90%; letter-spacing: -0.03em; color: rgba(255,255,255,.4); }
.info__small>span>img { min-width: 16px; max-width: 16px; }

/* --- mosaic hero (expertise, specialty, service, portfolio) --- */
.hero--mosaic { background: var(--bg-deepest); }
.mosaic { position: absolute; inset: -10% -4%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; transform: rotate(-4deg); }
.mosaic__col { display: flex; flex-direction: column; gap: 14px; animation: drift-up 70s linear infinite; }
.mosaic__col--down { animation-name: drift-down; animation-duration: 84s; }
.mosaic__col img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 12px; opacity: .55; }
@keyframes drift-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero__scrim--mosaic { background: radial-gradient(60% 70% at 50% 50%, rgba(2, 9, 5, .82), rgba(2, 9, 5, .55) 70%, rgba(2, 9, 5, .75)), linear-gradient(180deg, rgba(2, 9, 5, .65), rgba(2, 9, 5, .3) 35%, rgba(9, 24, 17, 1) 100%); }

/* breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; color: var(--ink-dim); font-size: 13px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--ink-dim); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-sub); }

/* --- market read --- */
.market__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.market__prose .sec-head { margin-bottom: 32px; }
.market__p { margin: 0 0 20px; max-width: 60ch; color: var(--ink-sub); font-size: 18px; line-height: 1.6; }
.market__pains { position: sticky; top: 110px; padding: 30px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--card); }
.market__pains-title { margin: 0 0 18px; color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }
.market__pains ol { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.market__pains li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.market__pains li:first-child { padding-top: 0; border-top: 0; }
.market__num { color: var(--ink-dim); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.market__pain { margin: 0 0 6px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.market__pains p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.5; }

/* --- three case cards --- */
.case-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.case-row .case-card { height: 420px; grid-column: auto; grid-row: auto; }
/* One or two cases: the row is sized to them, never two empty columns. */
.case-row--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-row--n1 { grid-template-columns: minmax(0, 1fr); }
.case-row--n1 .case-card { height: 380px; }

/* --- team trio --- */
.trio__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; }
.trio__text .sec-head { margin-bottom: 20px; }
.trio__text .body { margin: 0 0 20px; font-size: 17px; }
.trio__people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.person { margin: 0; }
.person img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: top; border-radius: var(--r-media); border: 1px solid var(--line-strong); background: var(--stage); filter: grayscale(.2); }
.person__name { margin: 14px 0 2px; color: var(--ink); font-size: 17px; font-weight: 600; }
.person__role { margin: 0; color: var(--ink-dim); font-size: 14px; }

/* --- FAQ --- */

/* --- link grid --- */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Balanced rows by count, never one card stranded on a row. */
@media (min-width: 992px) {
	.link-grid--n1, .link-grid--n2, .link-grid--n3, .link-grid--n4 { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
	.link-grid--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.link-grid--n5 > li { grid-column: span 2; }
	.link-grid--n5 > li:nth-child(n+4) { grid-column: span 3; }
	.link-grid--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.link-grid--n7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.link-grid--n7 > li { grid-column: span 3; }
	.link-grid--n7 > li:nth-child(n+5) { grid-column: span 4; }
	.link-grid--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.link-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.link-card { position: relative; display: grid; gap: 8px; height: 100%; padding: 22px 52px 22px 22px; border: 1px solid var(--line-strong); border-radius: var(--r-tile); background: rgba(255, 255, 255, .015); color: inherit; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.link-card:hover { border-color: var(--line-hover); background: rgba(255, 255, 255, .035); }
.link-card__name { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.link-card__text { color: var(--ink-muted); font-size: 14px; line-height: 1.45; }
.link-card__go { position: absolute; right: 22px; top: 24px; width: 13px; height: 12px; background: var(--ink-dim); -webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat; mask: url("../img/arrow-right.svg") center / contain no-repeat; transition: transform .2s ease, background-color .2s ease; }
.link-card:hover .link-card__go { background: var(--green); transform: translateX(3px); }

/* --- long prose (legal, case bodies) --- */
.prose { max-width: 760px; margin: 0 auto; color: var(--ink-muted); font-size: 16px; line-height: 1.75; }
.prose h2 { margin: 48px 0 14px; color: var(--ink); font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.prose h3 { margin: 32px 0 10px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.prose h4 { margin: 24px 0 8px; color: var(--ink-sub); font-size: 17px; font-weight: 600; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--green); }
.prose strong { color: var(--ink-sub); font-weight: 600; }
.prose a { color: var(--ink-sub); text-decoration: underline; text-decoration-color: rgba(0, 255, 138, .4); text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose > *:first-child { margin-top: 0; }

/* --- text page hero (case index, portfolio, results, legal...) --- */
.page-hero { position: relative; padding: 190px 0 72px; overflow: hidden; isolation: isolate; }
.page-hero__glow { position: absolute; z-index: -1; left: 50%; top: -220px; width: 900px; height: 560px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 255, 138, .12), rgba(0, 255, 138, 0) 70%); pointer-events: none; }
.page-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.page-hero__inner .h1 { max-width: 16ch; }
.page-hero__inner .lede { margin: 0 auto; max-width: 640px; }
.page-legal .page-hero { padding-bottom: 32px; }

/* filter chips */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .02); color: var(--ink-muted); font-size: 14px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.chip span { color: var(--ink-dim); font-size: 12px; }
.chip:hover { color: var(--ink); border-color: var(--line-hover); }
.chip[aria-pressed="true"] { color: #000; background: var(--green); border-color: var(--green); }
.chip[aria-pressed="true"] span { color: rgba(0, 0, 0, .6); }

/* case index grid */
.case-index__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.case-index__grid > li { display: block; }
.case-index__grid .case-card { height: 400px; }
.case-index__grid > li[hidden] { display: none !important; }

/* --- case detail --- */
.case-hero { position: relative; padding: 170px 0 64px; overflow: hidden; isolation: isolate; }
.case-hero__media { position: absolute; inset: 0; z-index: -1; }
.case-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.28) saturate(1.1); }
.case-hero__media span { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 24, 17, .3), var(--bg) 100%); }
.case-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.case-hero__inner .h1 { max-width: 18ch; }
.case-hero__inner .lede { max-width: 62ch; }
.case-hero__logo { height: 34px; max-width: 180px; }
.crumbs--left ol { justify-content: flex-start; }
.facts { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0 0; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-tile); background: rgba(5, 14, 10, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.facts > div { padding: 14px 22px; border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts dt { color: var(--ink-dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.facts dd { margin: 4px 0 0; color: var(--ink); font-size: 15px; }
.results-trio { padding: 8px 0 48px; }
.results-trio ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.results-trio li { display: grid; gap: 8px; padding: 26px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--card); }
.results-trio b { color: var(--green); font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.results-trio span { color: var(--ink-sub); font-size: 15px; line-height: 1.45; }
.case-nav { position: sticky; top: 64px; z-index: 5; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(9, 24, 17, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.case-nav ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.case-nav a { display: inline-flex; align-items: center; height: 52px; color: var(--ink-muted); font-size: 14px; text-decoration: none; white-space: nowrap; }
.case-nav a:hover { color: var(--ink); }
.case-body__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: start; }
.case-block { scroll-margin-top: 140px; }
.case-block + .case-block { margin-top: 56px; }
.case-body__lead { margin: 0; color: var(--ink-sub); font-size: 20px; line-height: 1.6; }
.prose--left { margin: 0; }
.case-body__side { position: sticky; top: 140px; display: grid; gap: 16px; }
.case-side-box { padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--card); scroll-margin-top: 140px; }
.case-side-box__title { margin: 0 0 14px; color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }
.case-side-box ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.case-side-box a { color: var(--ink-sub); font-size: 15px; }
.case-side-box p { margin: 0 0 16px; color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.case-quote__list { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.case-quote .rv { width: auto; padding: 36px; }
.case-quote .rv__body { font-size: 19px; color: var(--ink); }

/* --- portfolio --- */
.pcat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.pcat { display: block; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--card); color: inherit; text-decoration: none; transition: border-color .25s ease; }
.pcat:hover { border-color: var(--line-hover); }
.pcat__media { position: relative; display: block; height: 300px; overflow: hidden; background: var(--stage); border-bottom: 1px solid var(--line); }
.pcat__img { position: absolute; top: 28px; width: 34%; aspect-ratio: 9 / 14; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--line-strong); box-shadow: var(--shadow-media); transition: transform .5s var(--ease-out); }
.pcat__img--1 { left: 8%; transform: rotate(-6deg); top: 44px; }
.pcat__img--2 { left: 33%; z-index: 1; }
.pcat__img--3 { left: 58%; transform: rotate(6deg); top: 44px; }
.pcat:hover .pcat__img--2 { transform: translateY(-6px); }
.pcat__body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px 24px; }
.pcat__name { color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.pcat__count { color: var(--ink-dim); font-size: 13px; }
.tile-grid--portfolio .tile--email, .tile-grid--portfolio .tile--square { aspect-ratio: 4 / 5; }

/* --- numbered lists (what you get, values, principles, next steps) --- */
.get__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.get__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.get__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.get__list > li { padding: 30px 28px 34px 0; border-bottom: 1px solid var(--line); }
.get__list > li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.get__list--3 > li:nth-child(3n + 1), .get__list:not(.get__list--4) > li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.get__list--4 > li:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.get__list--4 > li:nth-child(n) { padding-left: 28px; border-left: 1px solid var(--line); }
.get__list--4 > li:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.get__num { display: block; margin-bottom: 18px; color: var(--green); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.get__list .h3 { margin-bottom: 10px; font-size: 21px; }
.get__list .body { margin: 0; }

/* service intro */
.intro__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.intro__text p { margin: 0 0 18px; max-width: 62ch; color: var(--ink-sub); font-size: 19px; line-height: 1.6; }
.intro__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.intro__shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: var(--r-tile); border: 1px solid var(--line-strong); }

/* proof band */
.proof { padding: 64px 0; }
.proof__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 72px; margin: 0; padding: 0; list-style: none; }
.proof__list li { display: grid; gap: 6px; text-align: center; }
.proof__list b { color: var(--green); font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.proof__list li > span { color: var(--ink-muted); font-size: 15px; }
.proof__list--inline { justify-content: flex-start; margin: 28px 0 40px; }
.proof__list--inline li { text-align: left; }
.proof__list--results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.proof__list--results li { align-content: start; gap: 8px; padding: 26px 0 28px; border-top: 1px solid var(--line); }
.proof__list--results b { font-size: 40px; }
.proof__list--results li > span { max-width: 34ch; line-height: 1.45; }
.proof__client { justify-self: start; color: var(--ink-dim); font-size: 13px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
.proof__client:hover { color: var(--ink-sub); text-decoration-color: var(--green); }
@media (max-width: 991px) { .proof__list--results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .proof__list--results { grid-template-columns: 1fr; } .proof__list--results li { padding: 20px 0; } .proof__list--results b { font-size: 34px; } }

/* results tabs */
.rtabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.rtabs__tab { height: 44px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .02); color: var(--ink-muted); font-size: 15px; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.rtabs__tab:hover { color: var(--ink); border-color: var(--line-hover); }
.rtabs__tab[aria-selected="true"] { color: #000; background: var(--green); border-color: var(--green); }
.rtabs__panel .sub { max-width: 60ch; }
.rtabs__panel .case-row { margin-top: 12px; }

/* reviews page */
.reviews-lead__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.reviews-lead .rv { width: auto; padding: 34px; }
.reviews-lead .rv__body { color: var(--ink); font-size: 18px; }
.rv-grid { columns: 3 320px; column-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.rv-grid .rv { width: auto; margin: 0 0 var(--gap); break-inside: avoid; }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--gap); margin: 0; padding: 0; list-style: none; }
.team-strip__list { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.team-strip__list img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--line-strong); }
.team-strip__list span { display: block; margin-top: 8px; color: var(--ink-muted); font-size: 12px; line-height: 1.3; }
.about-product { margin-top: 8px !important; font-size: 16px !important; }

/* process timeline */
.process-intro { padding-top: 0; }
.process-intro__text { max-width: 62ch; margin: 0 auto; color: var(--ink-sub); font-size: 20px; line-height: 1.6; text-align: center; }
.timeline { position: relative; display: grid; gap: 0; max-width: 940px; margin: 0 auto; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 34px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--green), rgba(0, 255, 138, .1)); }
.timeline__step { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 28px; padding: 0 0 56px; }
.timeline__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: 1px solid var(--green-22); border-radius: 50%; background: var(--bg); color: var(--green); font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.timeline__body .h3 { margin: 18px 0 12px; }
.timeline__body .body { margin: 0 0 14px; max-width: 64ch; }
.timeline__portal { margin: 0 0 14px; padding: 12px 16px; border-left: 2px solid var(--green); background: var(--green-07); color: var(--ink-sub); font-size: 15px; line-height: 1.5; }
.timeline__portal b { color: var(--ink); font-weight: 600; }
.timeline__deliv { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.timeline__deliv li { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-muted); font-size: 13px; }

/* philosophy comparison */
.compare__wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare__table th, .compare__table td { padding: 18px 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__table thead th { color: var(--ink-dim); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.compare__table tbody th { color: var(--ink); font-weight: 600; width: 22%; }
.compare__table td { color: var(--ink-muted); line-height: 1.5; }
.compare__table .compare__us { color: var(--ink-sub); background: rgba(0, 255, 138, .04); }
.compare__table thead .compare__us { color: var(--green); }

/* --- work with us --- */
.wwu-hero { position: relative; padding: 150px 0 96px; overflow: hidden; isolation: isolate; }
.wwu-hero__media { position: absolute; inset: 0; z-index: -1; background: #000; }
.wwu-hero__media img, .wwu-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.wwu-hero__media video { opacity: 0; transition: opacity .8s var(--ease-out); }
.wwu-hero__media video.is-playing { opacity: .55; }
.wwu-hero__media span { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 24, 17, .95) 0%, rgba(9, 24, 17, .7) 45%, rgba(9, 24, 17, .55) 100%), linear-gradient(180deg, rgba(9, 24, 17, 0) 60%, var(--bg) 100%); }
.wwu-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.wwu-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 24px; }
.wwu-hero__text .h1 { max-width: 12ch; }
.wwu-proof { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wwu-proof li { position: relative; padding-left: 26px; color: var(--ink-sub); font-size: 15px; }
.wwu-proof li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.wwu-form { display: grid; gap: 16px; padding: 32px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(12, 27, 20, .92), rgba(9, 24, 17, .96)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-media); }
.wwu-form__title { margin: 0 0 4px; color: var(--ink); font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.wwu-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { color: var(--ink-sub); font-size: 14px; font-weight: 500; }
.field legend { margin-bottom: 8px; padding: 0; }
.field__opt { color: var(--ink-dim); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
	width: 100%; min-height: 48px; padding: 12px 14px;
	border: 1px solid var(--line-strong); border-radius: 12px;
	background: rgba(2, 9, 5, .55); color: var(--ink);
	font: inherit; font-size: 16px; line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; background-image: url("../img/header-arrow.svg"); background-repeat: no-repeat; background-position: right 16px center; background-size: 10px; padding-right: 40px; }
.field select option { background: var(--bg); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-10); }
.field [aria-invalid="true"] { border-color: #ff6b6b; }
.field--checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { position: relative; display: inline-flex; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-muted); font-size: 14px; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.check input:checked + span { color: #000; background: var(--green); border-color: var(--green); }
.check input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.wwu-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wwu-form__status { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.wwu-form__status--error { border: 1px solid rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .08); color: #ffb3b3; }
.wwu-form__status a { color: #fff; }
.wwu-form__submit { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.wwu-form__submit .caption { margin: 0; }
.wwu-form__done { padding: 12px 0; outline: none; }
.wwu-form__done-title { margin: 0 0 8px; color: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.wwu-form__done p { margin: 0 0 8px; color: var(--ink-sub); }
.next-steps__cal { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.next-steps__cal .body { margin: 0; }

/* --- technology --- */
.tech-hero { padding: 170px 0 80px; }
.tech-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.tech-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tech-hero__note { margin: 0; padding-left: 14px; border-left: 2px solid var(--green); color: var(--ink-sub); font-size: 15px; }
.tech-hero__stage { position: relative; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: radial-gradient(80% 70% at 50% 40%, rgba(0, 255, 138, .1), rgba(0, 255, 138, 0) 70%), var(--bg-deepest); box-shadow: var(--shadow-media); }
.tech-hero__stage img { width: 100%; border-radius: var(--r-tile); }
.tech-split__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.tech-split__shot img { width: 100%; border-radius: var(--r-media); border: 1px solid var(--line-strong); box-shadow: var(--shadow-media); }
.tech-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tech-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tech-list .get__num { margin: 2px 0 0; }
.tech-list__title { margin: 0 0 6px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tech-list p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.tech-note__box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 860px; margin: 0 auto; padding: 32px 36px; border: 1px solid var(--green-22); border-radius: var(--r-card); background: var(--green-07); }
.tech-note__box p { margin: 0; color: var(--ink-sub); font-size: 18px; line-height: 1.6; }
.tech-note__box a { display: inline-flex; align-items: center; color: var(--ink); }

/* --- lightbox (native <dialog>, built by biz.js) --- */
.lb { width: min(1100px, calc(100vw - 32px)); max-width: none; height: min(88vh, 960px); max-height: none; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-media); background: var(--bg-deepest); color: var(--ink); overflow: hidden; }
.lb::backdrop { background: rgba(2, 9, 5, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.lb__title { margin: 0; color: var(--ink-sub); font-size: 14px; }
.lb__ctrls { display: flex; gap: 8px; }
.lb__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255, 255, 255, .03); color: #fff; cursor: pointer; }
.lb__btn:hover { border-color: var(--line-hover); }
.lb__btn svg { width: 14px; height: 14px; }
.lb__stage { height: calc(100% - 56px); display: flex; align-items: center; justify-content: center; overflow: auto; background: var(--bg-deepest); }
.lb__stage video { max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; height: 100%; background: #000; }
.lb__stage iframe { height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border: 0; }
.lb__stage--scroll { align-items: flex-start; }
.lb__stage img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.lb__stage--scroll img { width: min(700px, 100%); }
.lb__stage .lb__set { display: grid; gap: 24px; padding: 24px; }


/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 1400px) {
	.mega-x { grid-template-columns: 230px minmax(0, 1fr) 220px; }
}

/* Drawer threshold: same as valiant.app (script.js matchMedia 1200px). */
@media (max-width: 1200px) {
	:root { --secpad: 96px; }
	.h1 { font-size: 64px; }
	.h2 { font-size: 45px; }
	.h3 { font-size: 25px; }
	.h-cta { font-size: 56px; }
	.lede, .sub { font-size: 17px; }
	/* valiant.app parity: below 1200px the bar is logo + hamburger (34px) and
	   the CTA moves into the drawer's pinned footer. */
	.site-nav, .portal-link, .mega-backdrop, .site-header__actions .regular-btn { display: none; }
	.site-header__bar { min-height: 34px; align-items: flex-start; }   /* logo top-aligned, as measured */
	.site-header__actions { gap: 12px; }
	.menu-btn { display: inline-flex; }
	.site-footer__top { flex-direction: column; gap: 56px; }
	.site-footer__brand { max-width: none; }
	.site-footer__cols { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (min-width: 1200.02px) {   /* pairs with max-width: 1200px with no dead zone at fractional widths; not range syntax, for older Safari and Chrome */
	.drawer, .drawer-backdrop { display: none; }
}

@media (max-width: 991px) {
	.h-cta { font-size: 52px; }
}

@media (max-width: 767px) {
	:root { --secpad: 72px; }
	.h1 { font-size: 52px; }
	.h2 { font-size: 42px; }
	.h-cta { font-size: 44px; }
	.site-footer { padding-top: 64px; }
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 64px; }
	.spec-row { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 575px) {
	.h1 { font-size: 46px; line-height: 1; }
	.h2 { font-size: 36px; line-height: 1; }
	.h-cta { font-size: 40px; line-height: 1; }
}

@media (max-width: 480px) {
	:root { --gutter: 16px; }   /* style.css:13149 */
	.site-footer__cols { gap: 36px 16px; }   /* stays two columns: one column ran 1,000px+ */
	.site-footer__list a { line-height: 1.35; }
}

@media (max-width: 480px) {
	.h1 { font-size: 42px; line-height: 1.04; }
	.h2 { font-size: 33px; line-height: 1.04; }
	.h3 { font-size: 24px; }
	.h-cta { font-size: 38px; line-height: 1.04; }
	.lede { font-size: 15px; }
	.sub { font-size: 16px; }
}
@media (max-width: 390px) {
	.h1 { font-size: 40px; }
}

@media (max-width: 360px) {
	.h1 { font-size: 36px; }
	.h2 { font-size: 30px; }
	.h-cta { font-size: 34px; }
}


/* --- sections: responsive (plan §5.7) --- */
@media (max-width: 1200px) {
	.manifesto__grid { gap: 48px; }
	.manifesto__text p { font-size: 32px; }
	.stats__lead .stats__num { font-size: clamp(44px, 6.2vw, 72px); }
	.steps__tabs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
	.svc__visual { height: 260px; }
	.case-grid { grid-auto-rows: 250px; }
	.case-card--feature .case-card__metric b { font-size: 46px; }
}

@media (max-width: 991px) {
	.sec-head { margin-bottom: 44px; }
	.logo-rail__inner { grid-template-columns: 1fr; gap: 20px; }
	.logo-rail__stat { padding: 0; border: 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; }
	.manifesto__grid { grid-template-columns: 1fr; gap: 32px; }
	.manifesto__head { position: static; }
	.bento { grid-template-columns: 1fr; }
	.svc--wide, .svc--narrow, .svc--cta,
	.bento > .svc--wide:first-child, .bento > .svc--wide:first-child + .svc--narrow { grid-column: 1 / -1; }
	.svc--cta { flex-direction: column; align-items: flex-start; }
	.case-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
	.case-card:nth-child(n) { grid-column: auto; grid-row: auto; }
	.case-card:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
	.stats__grid { grid-template-columns: 1fr; gap: 32px; }
	.stats__lead { justify-items: start; text-align: left; }
	.steps__panel { grid-template-columns: 1fr; }
	.steps__panel-num { grid-row: auto; font-size: 96px; margin-bottom: 8px; }
	.xgrid { grid-template-columns: 1fr 1fr; }
	.xgrid__cta { grid-column: auto; }
	.story__grid { grid-template-columns: 1fr; gap: 40px; }
	.story__visual { height: 460px; max-width: 560px; }
	.tile-grid { grid-template-columns: 1fr 1fr; }
	.philosophy__cols { grid-template-columns: 1fr; gap: 0; }
	.philosophy__col { padding: 24px 0; }
	.rv { width: 360px; }
}

@media (max-width: 767px) {
	.hero { padding: 120px 0 72px; min-height: min(max(640px, 100svh), 820px); }
	.hero__inner .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
	.hero__inner .btn-row > a { width: 100%; }
	.logo-rail { padding: 26px 0; }
	.logo-rail__stat b { font-size: 32px; }
	.manifesto__text p { font-size: 24px; }
	.svc__visual { height: 220px; }
	.svc__body { padding: 22px 22px 26px; }
	.svc--cta .svc__body { padding: 28px 22px; }
	.svc--cta .h3 { font-size: 28px; }
	.fan__card { width: 112px; }
	.fan__card--1 { left: calc(50% - 170px); }
	.fan__card--2 { left: calc(50% - 56px); }
	.fan__card--3 { left: calc(50% + 58px); }
	.cases__head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
	/* Phone: the case cards become one horizontal snap row (plan §11.1.5). */
	.case-grid {
		display: flex; gap: 14px;
		overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
		margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px;
		scrollbar-width: none;
	}
	.case-grid::-webkit-scrollbar { display: none; }
	.case-card, .case-card:nth-child(n) { flex: 0 0 86%; height: 440px; scroll-snap-align: center; }
	.case-card--feature .case-card__metric b, .case-card__metric b { font-size: 38px; }
	.case-card__work, .case-card--feature .case-card__work { width: 84px; }
	.stats__lead .stats__num { font-size: clamp(40px, 10vw, 56px); }
	.stats__list b { font-size: 34px; }
	.stats__list li { padding: 20px 14px 20px 0; }
	.stats__list li:nth-child(even) { padding-left: 14px; }
	.steps__tabs { grid-auto-flow: row; grid-template-columns: 1fr; border-top: 0; }
	.steps__tab { flex-direction: row; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
	.steps__tab::before { top: -1px; }
	.steps__panels { margin-top: 24px; }
	.steps__panel-num { font-size: 72px; }
	.steps__panel .body { font-size: 16px; }
	.xgrid { grid-template-columns: 1fr; }
	.xcard { padding: 26px 22px 28px; }
	.xcard__go { right: 22px; top: 28px; }
	.story__visual { height: 380px; }
	.examples__head { flex-direction: column; align-items: flex-start; }
	.rail-nav { display: none; }
	.rail__track > .tile { width: 62vw; }
	.rail__track > .tile--email, .rail__track > .tile--square { width: 72vw; }
	.tile-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.rv { width: 86vw; padding: 22px; }
	.rv__body { font-size: 16px; }
	.cta__wrapper .outer__cta .btns { gap: 8px; margin-top: 15px; margin-bottom: 20px; }
	.lb { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}

@media (max-width: 480px) {
	/* Two up on phones keeps a nine-piece set to a few screens; page work
	   (landscape) stays one up so it remains legible. */
	.tile-grid { gap: 10px; }
	.tile-grid:has(.tile--landscape) { grid-template-columns: 1fr; }
	.tile-grid .tile__chip { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; }
	.tile-grid .tile__foot { left: 10px; right: 10px; bottom: 10px; }
	.tile-grid .tile__logo { max-height: 16px; max-width: 84px; }
	.tile-grid .tile__name { font-size: 12px; }
	.tile-grid .tile__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
	.tile-grid .tile__play::after { left: 16px; top: 12px; border-left-width: 11px; border-top-width: 8px; border-bottom-width: 8px; }
	.stats__list { grid-template-columns: 1fr; }
	.stats__list li:nth-child(odd) { border-right: 0; }
	.stats__list li:nth-child(even) { padding-left: 0; }
}

/* Two-column grids (tablet and phone) never strand a tile: curated example
   sets drop an odd last piece; complete grids (portfolio, page work) let it
   span the row instead. */
@media (max-width: 991px) {
	.tile-grid:not(.tile-grid--portfolio):not(.tile-grid--n1):not(:has(.tile--landscape)) > .tile:last-child:nth-child(odd) { display: none; }
	.tile-grid--portfolio > .tile:last-child:nth-child(odd), .tile-grid:has(.tile--landscape) > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.tile-grid.tile-grid--n1 { grid-template-columns: minmax(0, 340px); }
}

/* --- page components: responsive --- */
@media (max-width: 991px) {
	.mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mosaic__col:nth-child(n+5) { display: none; }
	.market__grid { grid-template-columns: 1fr; gap: 40px; }
	.market__pains { position: static; }
	.case-row:not(.case-row--n1) { grid-template-columns: 1fr 1fr; }
	.case-row--n3 .case-card:nth-child(3) { display: none; }
	.trio__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 767px) {
	.mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.mosaic__col { gap: 10px; }
	.mosaic__col:nth-child(n+4) { display: none; }
	.market__p { font-size: 16px; }
	.market__pains { padding: 22px; }
	.case-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
	.case-row::-webkit-scrollbar { display: none; }
	.case-row .case-card, .case-row .case-card:nth-child(3) { display: block; flex: 0 0 86%; height: 420px; scroll-snap-align: center; }
	.trio__people { gap: 10px; }
	.person__name { font-size: 14px; }
	.person__role { font-size: 12px; }
	.link-grid { grid-template-columns: 1fr; }
	.prose { font-size: 16px; }
	.prose h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.mosaic__col { animation: none; }
}

/* --- page templates: responsive --- */
@media (max-width: 1200px) {
	.case-index__grid, .pcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.team-strip__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.get__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.get__list--4 > li:nth-child(n) { padding-left: 28px; border-left: 1px solid var(--line); }
	.get__list--4 > li:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 991px) {
	.case-body__grid, .intro__grid, .wwu-hero__grid, .tech-hero__grid, .tech-split__grid { grid-template-columns: 1fr; gap: 40px; }
	.case-body__side { position: static; }
	.tech-split--flip .tech-split__shot { order: 2; }
	.get__list, .get__list--3 { grid-template-columns: 1fr 1fr; }
	.get__list > li:nth-child(n), .get__list--3 > li:nth-child(n) { padding-left: 28px; border-left: 1px solid var(--line); }
	.get__list > li:nth-child(2n + 1), .get__list--3 > li:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
	.team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.reviews-lead__list { grid-template-columns: 1fr; }
	.results-trio ul { grid-template-columns: 1fr; }
	.wwu-hero__text .h1 { max-width: 16ch; }
}
@media (max-width: 767px) {
	.page-hero { padding: 130px 0 48px; }
	.case-index__grid, .pcat-grid { grid-template-columns: 1fr; }
	.case-index__grid .case-card { height: 380px; }
	.case-hero { padding: 120px 0 40px; }
	.facts { width: 100%; }
	.facts > div { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
	.facts > div:nth-child(2n) { border-right: 0; }
	.case-nav { top: 54px; }
	.case-body__lead { font-size: 18px; }
	.get__list, .get__list--3, .get__list--4 { grid-template-columns: 1fr; }
	.get__list > li:nth-child(n), .get__list--3 > li:nth-child(n), .get__list--4 > li:nth-child(n) { padding: 24px 0; border-left: 0; }
	.intro__text p { font-size: 17px; }
	.proof__list { gap: 24px 40px; }
	.proof__list b { font-size: 38px; }
	.team-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
	.team-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rv-grid { columns: 1; }
	.timeline::before { left: 24px; }
	.timeline__step { grid-template-columns: 50px minmax(0, 1fr); gap: 16px; padding-bottom: 40px; }
	.timeline__num { width: 50px; height: 50px; font-size: 16px; }
	.timeline__body .h3 { margin-top: 10px; }
	.wwu-hero { padding: 120px 0 64px; }
	.wwu-form { padding: 22px; }
	.wwu-form__row { grid-template-columns: 1fr; }
	.tech-hero { padding: 120px 0 56px; }
	.tech-note__box { padding: 24px; }
	.tech-note__box p { font-size: 16px; }
	.pcat__media { height: 260px; }
}

/* Reduced motion: marquees become static, scrollable rows; films stay on
   their posters (biz.js never starts them). */
@media (prefers-reduced-motion: reduce) {
	.marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.marquee__track { animation: none; }
	.marquee__track[aria-hidden="true"] { display: none; }
	.case-card:hover .case-card__bg, .case-card:hover .case-card__work, .case-card:hover .case-card__metric { transform: none; }
}


/* ==========================================================================
   10. REDUCED MOTION (last, so it wins)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.site-header.is-stuck { animation: none; }
}


/* ============================================================================
   VALIANT.APP COMPONENT PORTS
   ----------------------------------------------------------------------------
   Copied from valiant.app's pre-light build (commit 592dc230, css/funnel.css)
   with the class names kept, so the two sites share one component language
   (Ben's audit, 2026-10-15: "a level below" valiant.app). The --fnl-* tokens
   are bridged onto the agency tokens rather than renamed in every rule.
   ========================================================================== */
:root {
	--fnl-ease-out: cubic-bezier(.22, .61, .36, 1);
	--fnl-ease-io: cubic-bezier(.65, 0, .35, 1);
	--fnl-bg: var(--bg);
	--fnl-rail: var(--bg-deep);
	--fnl-stage: var(--stage);
	--fnl-card-bg: var(--card);
	--fnl-border: 1px solid var(--line-strong);
	--fnl-border-hover: var(--line-hover);
	--fnl-inner-light: inset 0 1px 0 rgba(255, 255, 255, .05);
	--fnl-divider: 1px solid var(--line);
	--fnl-glass-bg: rgba(5, 14, 10, .45);
	--fnl-glass-border: 1px solid rgba(255, 255, 255, .18);
	--fnl-media-shadow: var(--shadow-media);
	--fnl-r-card: 20px;
	--fnl-r-media: 18px;
	--fnl-r-tile: 12px;
	--fnl-r-chip: 14px;
	--fnl-green: var(--green);
	--fnl-white: #fff;
	--fnl-sub: var(--ink-sub);
	--fnl-muted: var(--ink-muted);
	--fnl-dim: var(--ink-dim);
	--fnl-answer: var(--ink-answer);
}

/* --- logo rail + revenue odometer (funnel.css 1171-1266, 6444-6452, 6477-6484, 6710) --- */
.fnl-logos {
	position: relative;
	background: var(--fnl-rail);
	border-top: var(--fnl-divider);
	border-bottom: var(--fnl-divider);
	padding: 28px 0;
}
.fnl-logos--flush { background: transparent; border-top: 0; border-bottom: 0; }
.fnl-logos__grid { display: grid; grid-template-columns: 300px 1fr; column-gap: 40px; align-items: center; }
.fnl-logos__stat { grid-column: 1; min-width: 0; }
.fnl-logos__num {
	margin: 0;
	font-family: "Rethink Sans", sans-serif;
	font-size: 40px; line-height: 100%; font-weight: 600; letter-spacing: -0.03em;
	color: var(--fnl-white);
	font-variant-numeric: tabular-nums;
}
.fnl-logos__support {
	margin: 6px 0 0;
	font-size: 15px; line-height: 140%; font-weight: 300; letter-spacing: -0.03em;
	color: var(--fnl-muted);
	max-width: 260px;
}
.fnl-logorail {
	position: relative;
	overflow: hidden;
	height: 40px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
@keyframes fnl-logos-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
.fnl-logorail ul {
	display: flex; align-items: center; gap: 34px;
	width: max-content; height: 100%;
	margin: 0; padding: 0; list-style: none;
	animation: fnl-logos-scroll 42s linear infinite;
	will-change: transform;
}
.fnl-logorail li {
	display: flex; align-items: center; justify-content: center;
	height: 40px; width: 152px; flex: 0 0 auto;
	padding: 0 26px; box-sizing: content-box;
}
.fnl-logorail li img {
	display: block;
	max-height: 28px; max-width: 124px;
	width: auto; height: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .7;
	transition: opacity .4s var(--fnl-ease-out);
}
.fnl-logorail li[data-optical="0.78"] img { max-height: 34px; }
.fnl-logorail li[data-optical="1.12"] img { max-height: 45px; }
/* AGENCY: Webflow badge logos keep their colours (a white fill turns them into a solid shape). */
.fnl-logorail li img.logo-wf-colour { filter: grayscale(1) brightness(1.08); border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
	.fnl-logorail li:hover img { opacity: .95; }
}
.fnl-odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.fnl-odo__sep { display: inline-block; }
.fnl-odo__col { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: baseline; }
.fnl-odo__strip { display: block; will-change: transform; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.fnl-odo__strip > span { display: block; height: 1em; line-height: 1; }

@media (max-width: 1200px) {
	.fnl-logos__num { font-size: 36px; }
}
@media (max-width: 991px) {
	.fnl-logos { padding: 24px 0; }
	.fnl-logos__grid { grid-template-columns: 34% 1fr; column-gap: 32px; }
	.fnl-logos__num { font-size: 34px; }
	.fnl-logorail { height: 34px; }
	.fnl-logorail ul { gap: 48px; }
	.fnl-logorail li { height: 34px; }
	.fnl-logorail li[data-optical="0.78"] img { max-height: 27px; }
	.fnl-logorail li[data-optical="1.12"] img { max-height: 38px; }
}
@media (max-width: 767px) {
	.fnl-logos__grid { grid-template-columns: 1fr; row-gap: 20px; }
	.fnl-logos__num { font-size: 32px; }
	.fnl-logos__support { max-width: 300px; }
	.fnl-logorail { height: 44px; margin-inline: calc(-1 * var(--gutter)); }
	.fnl-logorail ul { gap: 40px; animation-duration: 30s; }
	.fnl-logorail li { height: 28px; }
	.fnl-logorail li img { max-height: 28px; }
	.fnl-logorail li[data-optical="0.78"] img { max-height: 22px; }
	.fnl-logorail li[data-optical="1.12"] img { max-height: 31px; }
}
@media (max-width: 575px) {
	.fnl-logos__num { font-size: 30px; }
}
@media (max-width: 360px) {
	.fnl-logos__num { font-size: 28px; }
	.fnl-logos__support { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.fnl-logorail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.fnl-logorail ul { animation: none !important; justify-content: flex-start; will-change: auto; }
	.fnl-logorail li[aria-hidden="true"] { display: none; }
	.fnl-odo__strip { transition: none; }
}

/* --- case-study panel + carousel (funnel.css 2255-2470, 6208-6292) --- */
.fnl-case {
	position: relative;
	padding: 48px;
	border-radius: 24px;
	background: #0A1812;
	border: var(--fnl-border);
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 56px;
	align-items: stretch;
	min-height: 420px;
}
.fnl-case__rocket {
	position: absolute; top: 20px; right: 20px;
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 14px;
	border: 1px solid rgba(0, 255, 138, .28);
	background: rgba(0, 255, 138, .07);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	pointer-events: none;
	z-index: 3;
}
.fnl-case__rocket svg { display: block; width: 22px; height: 22px; }
.fnl-case__left { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.fnl-case__logo { display: block; margin-bottom: 28px; }
.fnl-case__logo img { display: block; max-height: 34px; max-width: 200px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.fnl-case__h {
	margin: 0 0 28px;
	font-family: "Rethink Sans", sans-serif;
	font-size: 36px; line-height: 105%; font-weight: 500; letter-spacing: -0.03em;
	color: var(--fnl-white);
	max-width: 520px;
	text-wrap: balance;
}
.fnl-case__resultslabel { margin: 0 0 12px; font-size: 13px; line-height: 100%; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fnl-dim); }
.fnl-case__stats { display: block; }
.fnl-case__stat { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.fnl-case__stat + .fnl-case__stat { border-top: var(--fnl-divider); }
.fnl-case__staticon {
	flex: 0 0 auto; width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	color: var(--fnl-green);
}
.fnl-case__stat > p { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fnl-case__stat > p > b { font-family: "Rethink Sans", sans-serif; font-size: 28px; line-height: 100%; font-weight: 600; letter-spacing: -0.03em; color: var(--fnl-white); }
.fnl-case__stat > p > span { font-size: 16px; line-height: 130%; font-weight: 300; letter-spacing: -0.03em; color: var(--fnl-muted); max-width: 30ch; }
.fnl-case__quote {
	align-self: stretch;
	padding: 28px 32px;
	border-radius: var(--fnl-r-media);
	background: rgba(255, 255, 255, .03);
	border: var(--fnl-border);
}
.fnl-case__quote .rv__stars { margin-bottom: 16px; }
.fnl-case__pull { margin: 0 0 12px; font-family: "Rethink Sans", sans-serif; font-size: 22px; line-height: 128%; font-weight: 500; letter-spacing: -0.03em; color: var(--fnl-white); max-width: 34ch; }
.fnl-case__body { margin: 0; }
.fnl-case__body > p { margin: 0 0 16px; font-size: 17px; line-height: 165%; font-weight: 300; letter-spacing: -0.03em; color: var(--fnl-sub); max-width: 62ch; }
.fnl-case__body > p:last-child { margin-bottom: 0; }
.fnl-case__attrib { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.fnl-case__avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
.fnl-case__avatar--mono { display: inline-flex; align-items: center; justify-content: center; background: var(--green-10); color: var(--green); font-weight: 600; }
.fnl-case__author { margin: 0; font-size: 16px; line-height: 130%; font-weight: 500; letter-spacing: -0.03em; color: var(--fnl-white); }
.fnl-case__role { margin: 2px 0 0; font-size: 15px; line-height: 130%; font-weight: 300; letter-spacing: -0.03em; color: var(--fnl-muted); }

/* AGENCY: the media stage (Ben's audit: Webflow imagery, no lone thumbnail).
   The client's brand card fills the stage; up to three pieces of the work sit
   on it as a fanned stack, the same treatment as the services bento. */
.fnl-case__right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fnl-case__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 300px;
	border-radius: var(--fnl-r-media);
	overflow: hidden;
	background: var(--fnl-stage);
	border: var(--fnl-border);
	isolation: isolate;
}
.fnl-case__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .8s var(--fnl-ease-out); }
.fnl-case__bg--blur { filter: blur(10px) brightness(.55); transform: scale(1.1); }
.fnl-case__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 14, 10, 0) 30%, rgba(5, 14, 10, .55) 100%); pointer-events: none; }
.fnl-case__work { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.fnl-case__work img {
	position: absolute;
	width: auto; height: 78%; max-width: 40%;
	aspect-ratio: 4 / 5;
	object-fit: cover; object-position: top center;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85);
	transition: transform .6s var(--fnl-ease-out);
}
.fnl-case__work--n2 img:nth-child(1) { transform: translateX(-34%) rotate(-5deg); }
.fnl-case__work--n2 img:nth-child(2) { transform: translateX(34%) rotate(4deg); }
.fnl-case__work--n3 img:nth-child(1) { transform: translateX(-62%) rotate(-7deg) scale(.9); }
.fnl-case__work--n3 img:nth-child(2) { transform: translateY(-2%); z-index: 2; }
.fnl-case__work--n3 img:nth-child(3) { transform: translateX(62%) rotate(7deg) scale(.9); }
@media (hover: hover) and (pointer: fine) {
	.fnl-case--media:hover .fnl-case__bg { transform: scale(1.03); }
	.fnl-case--media:hover .fnl-case__bg--blur { transform: scale(1.13); }
	.fnl-case--media:hover .fnl-case__work--n3 img:nth-child(1) { transform: translateX(-70%) rotate(-9deg) scale(.9); }
	.fnl-case--media:hover .fnl-case__work--n3 img:nth-child(3) { transform: translateX(70%) rotate(9deg) scale(.9); }
}
.fnl-case__quote--work .fnl-case__resultslabel { margin-bottom: 10px; }
.fnl-case__quote--work .text-link { display: inline-block; margin-top: 14px; }
.fnl-case__link { align-self: flex-start; margin-top: 24px; color: var(--ink-sub); font-size: 15px; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--line-hover); padding-bottom: 2px; transition: color .25s ease, border-color .25s ease; }
.fnl-case__link:hover { color: var(--ink); border-color: var(--green); }

.fnl-cases { position: relative; margin-top: 40px; }
.fnl-cases__track {
	display: flex; gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
	outline: none;
}
.fnl-cases__track:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 24px; }
.fnl-cases__track::-webkit-scrollbar { display: none; }
.fnl-case--slide { flex: 0 0 100%; margin-top: 0; scroll-snap-align: start; min-width: 0; }
.fnl-cases__nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.fnl-cases__arrow {
	width: 44px; height: 44px; flex: 0 0 44px;
	border-radius: 50%;
	border: var(--fnl-border);
	background: #0A1812;
	cursor: pointer;
	position: relative;
	transition: border-color .2s ease, background .2s ease;
}
.fnl-cases__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-right: 2px solid #C9E3D6; border-bottom: 2px solid #C9E3D6; }
.fnl-cases__arrow--next::before { transform: translate(-60%, -50%) rotate(-45deg); }
.fnl-cases__arrow--prev::before,
.fnl-cases__arrow:not(.fnl-cases__arrow--next)::before { transform: translate(-40%, -50%) rotate(135deg); }   /* any back arrow, with or without --prev (Ben's point 40) */
.fnl-cases__arrow:hover { border-color: rgba(0, 255, 138, .4); background: #0D2018; }
.fnl-cases__arrow[disabled] { opacity: .35; cursor: default; }
.fnl-cases__arrow[disabled]:hover { border-color: rgba(255, 255, 255, .08); background: #0A1812; }
.fnl-cases__dots { display: flex; align-items: center; gap: 8px; }
.fnl-cases__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); cursor: pointer; transition: background .2s ease, width .2s ease; }
.fnl-cases__dot.is-on { background: #00FF8A; width: 22px; border-radius: 4px; }

@media (max-width: 1200px) {
	.fnl-case { padding: 40px; column-gap: 40px; }
	.fnl-case__h { font-size: 32px; }
}
@media (max-width: 991px) {
	.fnl-case { grid-template-columns: 1fr; row-gap: 28px; padding: 32px; border-radius: var(--fnl-r-card); min-height: 0; }
	.fnl-case__logo img { max-height: 28px; }
	.fnl-case__stat { min-height: 56px; }
	.fnl-case__stat > p > b { font-size: 26px; }
	.fnl-case__quote { padding: 22px; }
	.fnl-case__pull { font-size: 20px; }
	.fnl-case__stage { min-height: 280px; flex: 0 0 auto; aspect-ratio: 16 / 10; }
	.fnl-cases__track { gap: 16px; }
}
@media (max-width: 767px) {
	.fnl-case { padding: 24px 18px; }
	.fnl-case__h { font-size: 28px; }
	.fnl-case__stat > p > b { font-size: 24px; }
	.fnl-case__body > p { font-size: 16px; }
	.fnl-case__stage { min-height: 220px; }
	.fnl-case__rocket { display: none; }
	.fnl-cases__nav { gap: 14px; margin-top: 22px; }
}
@media (max-width: 480px) {
	.fnl-case__h { font-size: 26px; }
	.fnl-case__work img { height: 74%; max-width: 46%; }
}

/* --- testimonial wall (funnel.css 6293-6386, exact port) --- */
.fnl-tw { overflow: hidden; }
.fnl-tw__marquee {
	margin-top: 44px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fnl-tw__marquee--2 { margin-top: 20px; }
.fnl-tw__marquee--2 .fnl-tw__track { animation-direction: reverse; animation-duration: 104s; }
.fnl-tw__track { display: flex; width: max-content; animation: fnl-tw-drift 90s linear infinite; }
.fnl-tw:focus-within .fnl-tw__track { animation-play-state: paused; }
@keyframes fnl-tw-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
.fnl-tw__card {
	flex: 0 0 440px;
	width: 440px;
	margin: 0 24px 0 0;
	padding: 28px;
	border-radius: 20px;
	background: #0A1812;
	border: var(--fnl-border);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.fnl-tw__head { display: flex; align-items: center; gap: 14px; }
.fnl-tw__avatar { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: rgba(0, 255, 138, .12); display: flex; align-items: center; justify-content: center; }
.fnl-tw__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fnl-tw__mono { font-size: 22px; font-weight: 600; color: #00FF8A; line-height: 1; }
.fnl-tw__who { min-width: 0; }
.fnl-tw__name { font-size: 18px; font-weight: 700; color: #fff; margin: 0; }
.fnl-tw__title { font-size: 15px; color: #fff; opacity: .5; margin: 2px 0 0; }
.fnl-tw__stars { display: flex; gap: 3px; color: #00FF8A; }
.fnl-tw__star { width: 16px; height: 16px; display: block; color: rgba(255, 255, 255, .18); }
.fnl-tw__star.is-on { color: #00FF8A; }
.fnl-tw__star svg { width: 16px; height: 16px; display: block; }
.fnl-tw__star.is-half { position: relative; }
.fnl-tw__star.is-half::before {
	content: ""; position: absolute; inset: 0;
	width: calc(var(--f) * 100%);
	overflow: hidden;
	background: #00FF8A;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.593.255a.44.44 0 0 1 .814 0l1.588 4.889a.44.44 0 0 0 .418.303h5.141a.428.428 0 0 1 .252.774l-4.159 3.022a.428.428 0 0 0-.155.478l1.588 4.889a.428.428 0 0 1-.659.478l-4.159-3.022a.428.428 0 0 0-.503 0l-4.159 3.022a.428.428 0 0 1-.659-.478l1.589-4.889a.428.428 0 0 0-.156-.478L.216 6.221a.428.428 0 0 1 .251-.774h5.142a.44.44 0 0 0 .418-.303z'/%3E%3C/svg%3E") 0 0 / 16px 16px no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.593.255a.44.44 0 0 1 .814 0l1.588 4.889a.44.44 0 0 0 .418.303h5.141a.428.428 0 0 1 .252.774l-4.159 3.022a.428.428 0 0 0-.155.478l1.588 4.889a.428.428 0 0 1-.659.478l-4.159-3.022a.428.428 0 0 0-.503 0l-4.159 3.022a.428.428 0 0 1-.659-.478l1.589-4.889a.428.428 0 0 0-.156-.478L.216 6.221a.428.428 0 0 1 .251-.774h5.142a.44.44 0 0 0 .418-.303z'/%3E%3C/svg%3E") 0 0 / 16px 16px no-repeat;
}
.fnl-tw__quote { margin: 0; flex: 1 1 auto; }
.fnl-tw__pull { font-size: 17px; line-height: 25px; color: #fff; font-weight: 600; margin: 0 0 10px; }
.fnl-tw__quote p { font-size: 15px; line-height: 23px; color: #C9E3D6; margin: 0; }
.fnl-tw__quote .fnl-tw__pull { color: #fff; font-size: 17px; line-height: 25px; margin: 0 0 10px; }
.fnl-tw__sector { font-size: 14px; color: #83B59F; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
@media (max-width: 767px) {
	.fnl-tw__card { flex-basis: 300px; width: 300px; margin-right: 16px; padding: 22px; }
	.fnl-tw__avatar { flex-basis: 48px; width: 48px; height: 48px; }
	.fnl-tw__name { font-size: 16px; }
	.fnl-tw__title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.fnl-tw__track { animation: none; }
	.fnl-tw__marquee { overflow-x: auto; }
	.fnl-tw__card[aria-hidden="true"] { display: none; }
}

/* --- process stepper with the Webflow step photos (Ben's audit) --- */
.steps__panel { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 72px; align-items: center; }
.steps__panel:not([hidden]) { animation: steps-in .5s var(--fnl-ease-out); }
@keyframes steps-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.steps__media {
	position: relative;
	margin: 0;
	aspect-ratio: 600 / 570;
	border-radius: var(--fnl-r-card);
	overflow: hidden;
	border: var(--fnl-border);
	box-shadow: var(--fnl-media-shadow);
	background: var(--fnl-stage);
}
.steps__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.steps__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 24, 17, 0) 55%, rgba(9, 24, 17, .45) 100%); pointer-events: none; }
.steps__copy { min-width: 0; }
.steps__copy .steps__panel-num { margin: 0 0 18px; font-size: 120px; }
/* The Webflow photos carry the step number in the artwork; no second numeral beside them. */
.steps__media + .steps__copy .steps__panel-num { display: none; }
.steps__copy .h3 { font-size: 40px; }
.steps__copy .h3 { margin-bottom: 16px; }
.steps__count { margin: 28px 0 0; color: var(--ink-dim); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.steps.is-auto .steps__tab[aria-selected="true"]::before { background: rgba(255, 255, 255, .08); }
.steps__tab::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left center; }
.steps__tab.is-run::after { animation: steps-fill 6s linear forwards; }
@keyframes steps-fill { to { transform: scaleX(1); } }
@media (max-width: 991px) {
	.steps__panel { grid-template-columns: 1fr; row-gap: 28px; }
	.steps__media { max-width: 520px; aspect-ratio: 16 / 11; }
	.steps__copy .h3 { font-size: 30px; }
	.steps__copy .steps__panel-num { font-size: 88px; margin-bottom: 10px; }
}
@media (max-width: 767px) {
	.steps__copy .steps__panel-num { font-size: 64px; }
	.steps__count { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.steps__panel:not([hidden]) { animation: none; }
	.steps__tab.is-run::after { animation: none; }
}

/* --- Trustpilot badge (funnel.css 378-436, 4789-4800; exact) --- */
.fnl-tp {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 16px;
	color: var(--fnl-white);
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	letter-spacing: -0.02em;
}
.fnl-tp:hover .fnl-tp__txt,
.fnl-tp:focus-visible .fnl-tp__txt { text-decoration: underline; }
.fnl-tp__stars { display: inline-flex; gap: 2px; }
.fnl-tp__stars svg { display: block; width: 20px; height: 20px; }
.fnl-tp__txt b { font-weight: 700; }
.fnl-tp__sep { opacity: .45; margin: 0 6px; }
.fnl-tp__brand { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.fnl-tp__brand svg { display: block; width: 15px; height: 15px; }
@media (max-width: 767px) {
	.fnl-tp { display: flex; justify-content: center; width: 100%; margin-top: 14px; font-size: 13px; }
	.fnl-tp__stars svg { width: 18px; height: 18px; }
}

/* --- .fnl-reveal entrance (funnel.css 518-534, exact). The class is added by
   js/biz.js, never authored in markup, so with JS off nothing sits hidden.
   Hero copy is never a target (LCP). --- */
.fnl-reveal {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity .5s var(--fnl-ease-out),
		transform .6s var(--fnl-ease-out);
	transition-delay: var(--d, 0ms);
}
.fnl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fnl-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- gradient ring on cards (style.css 2 --grad-border, masked 1px ring as on
   valiant.app's dropdowns, case boxes and plan cards; plan §3.3) --- */
.svc, .link-card, .fnl-tw__card, .fnl-case, .fnl-case__quote, .fnl-case__stage, .rv, .case-card { border-color: transparent; }
.svc::after, .link-card::after, .fnl-tw__card::after, .fnl-case::after, .fnl-case__quote::after, .rv::after, .case-card::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none; z-index: 2;
}
.fnl-tw__card, .fnl-case__quote, .rv { position: relative; }
.svc:hover::after, .link-card:hover::after, .case-card:hover::after { background: linear-gradient(180deg, rgba(0, 255, 138, .45) 0%, rgba(255, 255, 255, .04) 100%); }

@media (max-width: 1200px) {
	.cta__wrapper .outer__cta>.h2-title { margin-bottom: 20px; }
	.cta__wrapper .outer__cta>p { font-size: 14px; }
	.cta__wrapper .outer__cta .btns { margin-top: 25px; margin-bottom: 20px; }
}
@media (max-width: 991px) {
	.cta__wrapper { padding: 60px 0px; }
}

/* --- FAQ: valiant.app .faq__wrapper.fnl-faq, exact --- */
.faq__wrapper { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 100px; background-color: #050E0A; overflow: hidden; }
.faq__wrapper>.faq-field {
	position: absolute; right: 0; top: 0; width: 52%; height: 100%;
	opacity: .2; pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 72% 66% at 74% 52%, #000 26%, rgba(0,0,0,.4) 58%, transparent 82%);
	        mask-image: radial-gradient(ellipse 72% 66% at 74% 52%, #000 26%, rgba(0,0,0,.4) 58%, transparent 82%);
}
.faq__wrapper>.faq-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.faq__wrapper .container { position: relative; z-index: 1; }
.faq__wrapper .outer__faq>.top { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; }
.faq__wrapper .outer__faq>.top .pill { margin-bottom: 18px; }
.faq__wrapper .outer__faq>.top .h2-title { margin: 0; }
.faq__wrapper .outer__faq .content { max-width: 900px; width: 100%; margin: 0 auto; }
.faq__wrapper .outer__faq .content>.elem { padding-top: 24px; padding-bottom: 24px; position: relative; cursor: default; }
.faq__wrapper .outer__faq .content>.elem:nth-child(1) { padding-top: 0px; }
.faq__wrapper .outer__faq .content>.elem:before { content: ""; position: absolute; left: 0px; height: 1px; bottom: 0px; width: 100%; background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,.07)); }
.faq__wrapper .outer__faq .content>.elem:last-child:before { content: none; }
.faq__wrapper .outer__faq .content>.elem .head-faq { display: flex; align-items: flex-start; justify-content: flex-start; cursor: pointer; width: 100%; min-height: 44px; }
.faq__wrapper .outer__faq .content>.elem .head-faq:focus-visible { outline: 2px solid #00FF8A; outline-offset: 3px; border-radius: 6px; }
.faq__wrapper .outer__faq .content>.elem .head-faq>span { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px; position: relative; }
.faq__wrapper .outer__faq .content>.elem .head-faq>span>.vertical { position: absolute; left: 50%; transform: translateX(-50%); top: 0px; width: 1px; height: 100%; background-color: #fff; transition: .3s ease all; }
.faq__wrapper .outer__faq .content>.elem .head-faq>span>.horizontal { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 1px; background-color: #fff; transition: .3s ease all; }
.faq__wrapper .content>.elem.opened>.head-faq>span>.vertical { transform: rotate(180deg); opacity: 0; }
.faq__wrapper .content>.elem.opened .head-faq>span>.vertical,
.faq__wrapper .content>.elem.opened .head-faq>span>.horizontal { background-color: #00FF8A; }
.faq__wrapper .outer__faq .content>.elem .head-faq>p { margin: 0 0 0 20px; font-size: 22px; line-height: 120%; font-weight: 400; letter-spacing: -0.03em; color: #fff; max-width: 46ch; transition: color .3s var(--fnl-ease-out); }
.faq__wrapper .outer__faq .content>.elem.opened .head-faq>p { color: #00FF8A; }
.faq__wrapper .outer__faq .content>.elem .content-faq { padding-left: 42px; margin-top: 20px; overflow: hidden; }
.faq__wrapper .outer__faq .content>.elem .content-faq>p { margin: 0; font-size: 16px; line-height: 165%; font-weight: 300; letter-spacing: -0.03em; color: var(--fnl-answer); max-width: 78ch; }
@media (max-width: 1200px) {
	.faq__wrapper { padding-top: 96px; padding-bottom: 96px; }
	.faq__wrapper .outer__faq .content>.elem .head-faq>p { font-size: 21px; }
}
@media (max-width: 991px) {
	.faq__wrapper .outer__faq .content>.elem .head-faq>p { font-size: 20px; }
}
@media (max-width: 767px) {
	.faq__wrapper { padding-top: 72px; padding-bottom: 72px; }
	.faq__wrapper .outer__faq .content>.elem .head-faq>p { font-size: 19px; margin-left: 10px; }
	.faq__wrapper .outer__faq .content>.elem .content-faq { padding-left: 30px; }
}

/* --- dot fields (valiant.app .cases__list .cases-dots, .reviews__wrapper > .dots) --- */
.fnl-s4 { position: relative; overflow: hidden; }
.fnl-s4>.cases-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 862px; max-width: 100%; aspect-ratio: 862 / 2282; opacity: .1; pointer-events: none; z-index: 0; }
.fnl-s4>.container { position: relative; z-index: 1; }
.fnl-tw { position: relative; }
.fnl-tw>.dots { position: absolute; left: 50%; transform: translateX(-50%); top: 0px; width: 1440px; max-width: 100%; aspect-ratio: 1440 / 1462; height: auto; opacity: .1; z-index: 0; pointer-events: none; }
.fnl-tw>.container, .fnl-tw>.fnl-tw__marquee { position: relative; z-index: 1; }
.cases-dots canvas, .fnl-tw>.dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- philosophy principle cards (plan H13; Webflow philosophy illustrations) --- */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.principle {
	position: relative;
	display: flex; flex-direction: column;
	overflow: hidden;
	border-radius: var(--fnl-r-card);
	background: var(--fnl-card-bg);
	box-shadow: var(--fnl-inner-light);
}
.principle::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.principle__art { aspect-ratio: 580 / 300; overflow: hidden; background: #00FF8A; }
.principle__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--fnl-ease-out); }
.principle:hover .principle__art img { transform: scale(1.03); }
.principle__copy { padding: 32px 32px 36px; }
.principle__copy .h3 { margin: 0 0 14px; }
.principle__copy p { margin: 0; max-width: 54ch; color: var(--ink-sub); font-size: 17px; line-height: 1.55; font-weight: 300; letter-spacing: -0.03em; }
@media (max-width: 767px) {
	.principles { grid-template-columns: 1fr; gap: 16px; }
	.principle__copy { padding: 24px 22px 28px; }
	.principle__copy p { font-size: 16px; }
}

/* --- Media Buying collage (plan H4) --- */
.adsm { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, rgba(0, 255, 138, .10), rgba(0, 255, 138, 0) 60%), var(--fnl-stage); }
.adsm__creative { position: absolute; width: 34%; aspect-ratio: 367 / 459; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85); }
.adsm__creative--a { left: 6%; top: 10%; transform: rotate(-6deg); }
.adsm__creative--b { right: 4%; top: 6%; transform: rotate(5deg); }
.adsm__table { position: absolute; margin: 0; width: 72%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.adsm__table img { display: block; width: 100%; height: auto; }
.adsm__table figcaption { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #0A1812; color: var(--ink-sub); font-size: 12px; letter-spacing: -0.02em; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.adsm__table figcaption b { color: #fff; font-weight: 600; }
.adsm__table--back { left: 8%; top: 30%; transform: rotate(-2deg); opacity: .9; }
.adsm__table--front { right: 6%; bottom: -6%; }
.adsm__table--front figcaption b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: #00FF8A; vertical-align: middle; }
@media (hover: hover) and (pointer: fine) {
	.adsm__creative, .adsm__table { transition: transform .6s var(--fnl-ease-out); }
	.svc:hover .adsm__table--front { transform: translateY(-6px); }
	.svc:hover .adsm__creative--a { transform: rotate(-8deg) translateX(-6px); }
	.svc:hover .adsm__creative--b { transform: rotate(7deg) translateX(6px); }
}

.intro__collage { position: relative; aspect-ratio: 16 / 11; border-radius: var(--fnl-r-media); overflow: hidden; border: var(--fnl-border); }
.roas-tables { display: grid; gap: 16px; }
.roas-tables .adsm__table { position: relative; width: 100%; }
.intro__shots:has(.intro__collage), .intro__shots:has(.roas-tables) { display: block; }

/* --- industries as valiant.app .fnl-card tiles (plan H8): card ground,
   inner light, gradient ring, -3px lift and brighter border on hover --- */
.xgrid { gap: 24px; border: 0; }
.xgrid > li { border: 0; }
.xcard {
	overflow: hidden;
	border-radius: var(--fnl-r-card);
	background: var(--fnl-card-bg);
	box-shadow: var(--fnl-inner-light);
	padding: 28px 28px 32px;
	transition: transform .42s var(--fnl-ease-out), background-color .25s ease;
}
.xcard::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
	transition: background .42s var(--fnl-ease-out);
}
.xcard__name { font-size: 27px; font-weight: 500; line-height: 115%; letter-spacing: -0.03em; }
.xcard__line { font-size: 16px; line-height: 140%; font-weight: 300; letter-spacing: -0.03em; color: var(--fnl-muted); }
.xcard__go { top: 30px; right: 28px; }
@media (hover: hover) and (pointer: fine) {
	.xcard:hover { transform: translate3d(0, -3px, 0); background: var(--fnl-card-bg); }
	.xcard:hover::after { background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 100%); }
}
@media (prefers-reduced-motion: reduce) { .xcard:hover { transform: none; } }

/* --- About (plan H3): valiant.app's column heading, .fnl-h2--col (funnel.css 287, 4128, 4280, 4507, 4808) --- */
.manifesto__head .h2 { font-size: 58px; line-height: 95%; max-width: 560px; }   /* larger than the reveal text, as on Webflow */
@media (max-width: 1400px) { .manifesto__head .h2 { font-size: 52px; } }
@media (max-width: 1200px) { .manifesto__head .h2 { font-size: 46px; max-width: 470px; } }
@media (max-width: 991px) { .manifesto__head .h2 { font-size: 42px; max-width: 100%; } }
@media (max-width: 767px) { .manifesto__head .h2 { font-size: 36px; } }

/* --- case index: valiant.app case-studies.html, exact (style.css 2652-2690,
   4798-4945, 12944-12960, 13287-13322 and their breakpoints) --- */
.case__hero--video { position: relative; z-index: 2; overflow: hidden; }
/* The doors film opens on a bright frame; a top scrim keeps the header legible (Ben's point 42). */
.case__hero--video:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 260px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 9, 5, .78) 0%, rgba(2, 9, 5, 0) 100%); }
.case__hero--video>video { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; object-fit: cover; }
.case__hero--video .outer__video--hero { position: relative; z-index: 2; min-height: 855px; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 120px; justify-content: flex-end; }
.case__hero--video .outer__video--hero>.h2-title { margin: 0 0 30px; }
.case__hero--video .outer__video--hero>p { margin: 0px; max-width: 520px; font-size: 16px; line-height: 130%; color: #83B59F; font-weight: 400; }
.case__hero--video .outer__video--hero .btns { margin-top: 40px; display: flex; gap: 15px; }
.pre-title { display: block; text-transform: uppercase; margin-bottom: 40px; font-size: 12px; line-height: 90%; font-weight: 500; color: #5E8272; letter-spacing: -0.03em; }
.cases__list { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 100px; overflow: hidden; }
.cases__list .outer__list { position: relative; }
.cases__list .outer__list>.cases-dots { position: absolute; left: 50%; opacity: .1; top: 50%; transform: translate(-50%, -50%); width: 862px; max-width: 100%; aspect-ratio: 862 / 2282; pointer-events: none; }
.cases__list .outer__list>.cases-dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cases__list .outer__list>.top { position: relative; text-align: center; margin-bottom: 60px; }
.cases__list .outer__list>.top>.pre-title { text-align: center; }
.cases__list .outer__list>.top>.h2-title { margin: 0 0 30px; }
.cases__list .outer__list>.top>p { margin: 0 auto; max-width: 560px; font-size: 14px; line-height: 130%; letter-spacing: -0.03em; color: #83B59F; }
.cases__list .main__list { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-row-gap: 40px; grid-column-gap: 40px; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; }
.cases__list .main__list>.el { border-radius: 18px; overflow: hidden; position: relative; background-color: var(--fnl-stage); background-repeat: no-repeat; background-size: cover; background-position: center; }
.cases__list .main__list>.el.long { grid-column: span 2; }
.cases__list .main__list>.el.short { grid-column: span 1; }
.cases__list .main__list>.el:before { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background-color: rgba(255,255,255,.01); transition: backdrop-filter .5s ease, background-color .5s ease; }
.cases__list .main__list>.el:hover:before { -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); background-color: rgba(255,255,255,0); }
.cases__list .main__list>.el.shadow:after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom left, rgba(0,0,0,0), rgba(0,0,0,1)); pointer-events: none; }
.cases__list .main__list>.el>.inn { position: relative; z-index: 3; min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 35px; border-radius: 18px; overflow: hidden; }
.cases__list .main__list>.el .logo img { display: block; max-height: 36px; max-width: 160px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.cases__list .main__list>.el>.inn .desc { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; }
.cases__list .main__list>.el>.inn .desc>h3 { margin: 0px; font-family: "Rethink Sans", sans-serif; font-size: 32px; line-height: 110%; font-weight: 500; color: #FFFFFF; letter-spacing: -0.03em; }
.cases__list .main__list>.el>.inn .desc>.btn { margin-left: 5px; flex: 0 0 auto; }
.cases__list .main__list>.el .btn>a { white-space: nowrap; color: #fff; }
.cases__list .main__list>.el .btn>a span:not(.btn-halo):not(.btn-inner) { display: inline-flex; margin-left: 7px; }
@media (max-width: 1200px) {
	.case__hero--video .outer__video--hero { min-height: 740px; padding-bottom: 70px; }
	.case__hero--video .outer__video--hero>p { font-size: 14px; }
	.case__hero--video .outer__video--hero .btns { margin-top: 30px; }
	.cases__list { padding: 60px 0px; }
	.cases__list .outer__list>.top>p { font-size: 12px; }
	.cases__list .outer__list>.top { margin-bottom: 40px; }
}
@media (max-width: 991px) {
	.cases__list .main__list { gap: 25px; }
	.cases__list .main__list>.el>.inn .desc>h3 { font-size: 22px; }
	.cases__list .main__list>.el>.inn { padding: 20px; min-height: 320px; }
}
@media (max-width: 767px) {
	.cases__list { padding: 40px 0px; }
	.cases__list .outer__list>.top { margin-bottom: 25px; }
	.cases__list .main__list>.el.short>.inn .desc { flex-direction: column; align-items: flex-start; gap: 15px; }
	.cases__list .main__list>.el:before { -webkit-mask-image: linear-gradient(to top, #fff 30%, rgba(255,255,255,0) 80%); mask-image: linear-gradient(to top, #fff 30%, rgba(255,255,255,0) 80%); }
}
@media (max-width: 480px) {
	.case__hero--video .outer__video--hero .btns { flex-wrap: wrap; }
	.cases__list .main__list { grid-template-columns: 1fr; }
	.cases__list .main__list>.el.long { grid-column: span 1; }
	.cases__list .main__list>.el>.inn .desc { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================================
   CASE DETAIL: valiant.app case-study-whop.html. Every rule below up to the
   "agency glue" marker is extracted verbatim from the pre-light css/style.css
   (selectors .case__hero, .testimonial__wrapper, .case__feed,
   .elem__article--case and their keyframes, with their media queries) by
   tools in the quality pass. Do not restyle here.
   ========================================================================== */
.testimonial__wrapper {
	padding-top: 100px;
	padding-bottom: 100px;
	position: relative;
	z-index: 2;
	overflow:hidden;
}
.testimonial__wrapper>img {
	position: absolute;
	left:0px;
	bottom:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.testimonial__wrapper {
	position: relative;
}
.testimonial__wrapper .dots {
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:0px;
	opacity:.07;
}
.testimonial__wrapper .outer__testimonial {
	position: relative;
	z-index: 3;
}
.testimonial__wrapper .pre-title {
	text-align: center;
}
.testimonial__wrapper .outer__testimonial .comment>p {
	text-align: center;
}
.testimonial__wrapper .outer__testimonial {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.testimonial__wrapper .outer__testimonial .author {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
}
.testimonial__wrapper .outer__testimonial .author>.desc>p {
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 90%;
	color:#83B59F;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.testimonial__wrapper {
	border-top:1px solid rgba(255,255,255,.07);
	border-bottom:1px solid rgba(255,255,255,.07);
	background-color: #091811;
}
.testimonial__wrapper .outer__testimonial .author>.desc>span {
	display: inline-flex;
	font-size: 10px;
	line-height: 130%;
	color:#5E8272;
}
.testimonial__wrapper .outer__testimonial .author>.desc {
	display: inline-flex;
	flex-direction: column;
	margin-left: 15px;
	align-items: flex-start;
}
.testimonial__wrapper .outer__testimonial .author>.image>img {
	position: relative;
	max-width: 100%;
	border-radius: 250px;
	max-height: 100%;
}
.testimonial__wrapper .outer__testimonial .author>.image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	max-width: 30px;
	min-height: 30px;
	max-height: 30px;
	border-radius: 250px;
	border:1px solid rgba(255,255,255,.2);
}
.testimonial__wrapper .outer__testimonial>.comment>p {
	margin:0px;
	font-size: 32px;
	line-height: 110%;
	letter-spacing: -0.03em;
	color:#83B59F;
	font-weight: 500;
}
.testimonial__wrapper .outer__testimonial>.comment>p .type-caret {
	display:inline-block;
	width:2px;
	height:0.95em;
	margin-left:3px;
	vertical-align:-0.1em;
	background:currentColor;
	opacity:.8;
	animation:typeBlink 1s steps(1) infinite;
}
@keyframes typeBlink { 50%{ opacity:0; } }
.case__feed {
	padding-top: 100px;
	position: relative;
	z-index: 2;
	padding-bottom: 100px;
}
.case__feed .outer__case .inn {
	display: flex;
	justify-content: space-between;
}
.case__feed .outer__case .inn>.left {
	min-width: 250px;
	max-width: 250px;
}
.case__feed .outer__case .inn>.left>.float-left {
	position: sticky;
	top:30px;
	left:0px;
	width: 100%;
}
.case__feed .outer__case .inn>.left>.float-left>ul {
	padding:0px;
	list-style-type: none;
	margin:0px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.case__feed .outer__case .inn>.left>.float-left>ul>li {
	width: 100%;
	margin-bottom: 25px;
}
.case__feed {
	border-bottom:1px solid rgba(255,255,255,.07);
}
.case__feed .outer__case .inn>.left>.float-left>ul>li:last-child {
	margin-bottom: 0px;
}
.case__feed .outer__case .inn>.left>.float-left>ul>li>a:before {
	content:"";
	position: absolute;
	left:0px;
	bottom:0px;
	width: 100%;
	height: 1px;
	opacity:.6;
	background:linear-gradient(to right , rgba(94,130,114,.7) 15%, rgba(94,130,114,.0) 65%)
}
.case__feed .outer__case .inn>.left>.float-left>ul>li>a.current {
	color:rgba(94,130,114,1);
}
.case__feed .outer__case .inn>.left>.float-left>ul>li>a {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 24px;
	line-height: 90%;
	font-weight: 500;
	letter-spacing: -0.03em;
	position: relative;
	padding-bottom: 25px;
	text-decoration: none;
	color:rgba(94,130,114,.4);
	transition:.3s ease all;
}
.case__feed .inner__content .text .list>ul {
	padding:0px;
	list-style-type: none;
	margin:0px;
}
.case__feed .inner__content .text .list>ul>li>span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	position: relative;
	top:-2px;
}
.case__feed .inner__content .text .list>ul>li:last-child {
	margin-bottom: 0px;
}
.case__feed .inner__content .text .list>ul>li {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 15px;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: -0.03em;
	color:#5E8272;
}
.case__feed .inner__content .text .list {
	margin-top: 40px;
	width: 100%;
	border-radius: 12px;
	border:1px solid rgba(255,255,255,.07);
	padding:28px;
}
.case__feed .inner__content .text>p {
	margin-top: 0px;
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 160%;
	letter-spacing: -0.03em;
	color:#83B59F;
}
.case__feed .inner__content .text>p:last-child {
	margin-bottom: 0px;
}
.case__feed  .right__box {
	margin-left: 60px;
}
.case__feed  .right__box .inn>p {
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 18px;
	line-height: 90%;
	letter-spacing: -0.03em;
	color:#83B59F;
}
.case__feed  .right__box .inn>.hyperlink>p>a {
	display: inline-flex;
	min-width: 10px;
	max-width: 10px;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
	transition:.3s ease all;
}
.case__feed  .right__box .inn>.hyperlink>p>a:hover {
	filter:brightness(1.4);
}
.case__feed  .right__box .inn>.tag__main>p {
	margin:0px;
	font-size: 12px;
	line-height: 90%;
	color:#5E8272;
	font-weight: 500;
}
.case__feed  .right__box .inn .bottom__tags {
	margin-left: -25px;
	padding-top: 30px;
	border-top: 1px solid rgba(255,255,255,.06);
	width: calc(100% + 50px);
}
.case__feed .inner__content  .elem__article--case {
	margin-top: 120px;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem>p {
	margin:0px;
	margin-left: 20px;
	font-size: 14px;
	letter-spacing: -0.03em;
	line-height: 110%;
	font-weight: 500;
	color:#83B59F;
}
.case__feed .inner__content .elem__article--case .services__grid {
	background:linear-gradient(to top right , rgba(255,255,255,0) , rgba(255,255,255,.06));
}
.case__feed .inner__content .elem__article--case .services__grid>.elem {
	--mx:50%; --my:50%;
	position: relative;
	overflow: hidden;
	transition: background-color .3s ease;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem::after {
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	opacity:0; transition:opacity .35s ease;
	background:radial-gradient(170px circle at var(--mx) var(--my), rgba(0,255,138,.16), rgba(0,255,138,.05) 46%, rgba(0,255,138,0) 72%);
}
.case__feed .inner__content .elem__article--case .services__grid>.elem:hover::after { opacity:1;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem>span, .case__feed .inner__content .elem__article--case .services__grid>.elem>p {
	position: relative; z-index: 1;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem>span {
	transition: transform .35s ease, box-shadow .35s ease;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem:hover>span {
	transform: scale(1.04);
	box-shadow: 0 8px 20px rgba(0,255,138,.20);
}
.case__feed .inner__content .elem__article--case .services__grid>.elem {
	border-right:1px solid rgba(255,255,255,.07);
}
.case__feed .inner__content .elem__article--case .services__grid>.elem {
	border-top:1px solid rgba(255,255,255,.07);
}
.case__feed .inner__content .elem__article--case .services__grid>.elem:nth-child(1), .case__feed .inner__content .elem__article--case .services__grid>.elem:nth-child(2) {
	border-top:0px;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem:nth-child(even) {
		border-right:0px;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem>span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	max-width: 40px;
	min-height: 40px;
	max-height: 40px;
	border-radius: 8px;
	background-repeat: no-repeat!important;
	background-size: cover!important;
	background-position: center!important;
}
.case__feed .inner__content .elem__article--case .services__grid>.elem {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 90px;
	padding-left: 25px;
	padding-right: 25px;
}
.case__feed .inner__content .elem__article--case .services__grid {
	width: 100%;
	max-width: 460px;
	border-radius: 18px;
	display: grid;
	grid-template-columns: repeat(2 ,1fr);
	border:1px solid rgba(255,255,255,.07);
}
.case__feed .inner__content .services {
	margin-top: 120px;
}
.case__feed  .right__box .inn .bottom__tags>.el {
	margin-bottom: 25px;
}
.case__feed  .right__box .inn .bottom__tags>.el:last-child {
	margin-bottom: 0px;
}
.case__feed  .right__box .inn .bottom__tags>.el>ul {
	padding:0px;
	list-style-type: none;
	margin:0px;
	display: flex;
	flex-wrap:wrap;
	gap:8px;
}
.case__feed  .right__box .inn .bottom__tags>.el>ul>li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 31px;
	border-radius: 12px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 12px;
	line-height: 90%;
	letter-spacing: -0.03em;
	color:#83B59F;
	border:1px solid rgba(255,255,255,.05);
	background:linear-gradient(to top right, rgba(255,255,255,0) , rgba(255,255,255,.06));
}
.case__feed  .right__box .inn .bottom__tags>.el>p {
	margin-top: 0px;
	margin-bottom: 15px;
	font-size: 12px;
	line-height: 90%;
	color:#5E8272;
	letter-spacing:-0.03em;
	font-weight: 500;
}
.case__feed  .right__box .inn .bottom__tags>.el {
	padding-left: 25px;
	padding-right: 25px;
}
.case__feed  .right__box .inn .bottom__tags {
	margin-top: 30px;
}
.case__feed  .right__box .inn>.tag__main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:6px;
	border-radius: 6px;
	background-color:rgba(94,130,114,.1);
}
.case__feed  .right__box .inn>.hyperlink {
	margin-bottom: 15px;
}
.case__feed  .right__box .inn>.hyperlink>p {
	margin:0px;
	font-size: 12px;
	line-height: 130%;
	font-weight: 300;
	color:#5E8272;
	letter-spacing: -0.03em;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.case__feed  .right__box .inn {
	min-width: 330px;
	position: sticky;
	top:30px;
	max-width: 330px;
	padding:30px 25px;
	background:linear-gradient(to top right, rgba(255,255,255,0) ,rgba(255,255,255,.06));
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border:1px solid rgba(255,255,255,.06);
}
.elem__article--case .slider .elem {
	min-width: 170px;
	max-width: 170px;
}
.elem__article--case {
	overflow:hidden;
}
.elem__article--case .slider {
	position: relative;
}
.elem__article--case .slider:before {
	content:"";
	position: absolute;
	top:0px;
	right:0px;
	width: calc(100% - 300px);
	height: 100%;
	pointer-events: none;
	z-index: 1;
	background:linear-gradient(to right , rgba(5,14,10,0) , rgba(5,14,10,1));
}
.elem__article--case .slider .elem>.inn {
	display: flex;
	align-items: center;
	justify-content: center;
}
.elem__article--case .slider .elem>.inn>img {
	max-width: 100%;
	border-radius: 12px;
}
.elem__article--case .slider .slick-slide {
      margin: 0 10px;
}
.case__hero .outer__case {
	text-align: center;
}
.case__hero .outer__case .outline {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60px;
	opacity:.6;
}
.case__hero .outer__case .desc>p {
	text-align: center;
	margin:0px auto;
	font-size: 16px;
	line-height: 130%;
	max-width: 640px;
	letter-spacing: -0.03em;
	color:rgba(255,255,255,.6);
}
.case__hero {
	padding-top: 193px;
	position: relative;
	z-index: 2;
}
.case__hero {
	overflow: hidden;
}
.case__hero:before {
	content:"";
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	background: inherit;
	filter: blur(20px);
	transform: scale(1.06);
}
.case__hero:after {
	content:"";
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.15);
	z-index: 1;
}
.case__hero.plain:after {
	display: none;
}
.case__hero .outer__case {
	position: relative;
	z-index: 2;
}
.case__hero {
	background-repeat: no-repeat!important;
	background-size: cover!important;
	background-position: center!important;
}
@keyframes csHeroReveal {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
	.case__hero {
		animation: csHeroReveal 1.3s ease both;
	}
	.case__hero:before {
		animation: csHeroBlur 1.1s ease 1.05s both;
	}
	.case__hero .outer__case .desc>.h2-title {
		animation: csHeroRise 0.8s cubic-bezier(.22,.61,.36,1) 1.15s both;
	}
	.case__hero .outer__case .desc>p {
		animation: csHeroRise 0.8s cubic-bezier(.22,.61,.36,1) 1.55s both;
	}
	.case__hero .outer__case .outline {
		animation: csHeroFade 0.9s ease 2.2s both;
	}
}
@keyframes csHeroBlur {
	from{ opacity:0; }
	to{ opacity:1; }
}
@keyframes csHeroRise {
	from{ opacity:0; transform:translateY(40px); }
	to{ opacity:1; transform:translateY(0); }
}
@keyframes csHeroFade {
	from{ opacity:0; transform:translateY(20px); }
	to{ opacity:.6; transform:translateY(0); }
}
.elem__article--case .slick-prev {
	display: none;
}
.elem__article--case .slick-next:before {
	content:none;
}
.elem__article--case .slick-next {
	right:30px!important;
	min-width: 50px;
	max-width: 50px;
	min-height: 50px;
	max-height: 50px;
	background:url('../img/app/btn-arrow-right.svg');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
	border-radius: 250px;
	background-color:rgba(255,255,255,.01);
	backdrop-filter:blur(20px);
	z-index: 4;
	border:1px solid rgba(255,255,255,.07);
	transition:.3s ease all;
}
.elem__article--case .slick-next:hover {
	background-color:rgba(255,255,255,.08);
}
.elem__article--case .slider {
	margin-top: 60px;
}
.case__feed .inner__content .text .list { position: relative; border-color: transparent;
}
.case__feed .inner__content .text .list::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.case__feed .inner__content .elem__article--case .services__grid { position: relative; border-color: transparent;
}
.case__feed .inner__content .elem__article--case .services__grid::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.case__feed  .right__box .inn .bottom__tags>.el>ul>li { position: relative; border-color: transparent;
}
.case__feed  .right__box .inn .bottom__tags>.el>ul>li::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.case__feed  .right__box .inn { border-color: transparent;
}
.case__feed  .right__box .inn::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.case__feed .inner__content {
	width: calc(100% - 640px);
}
.case__feed .right__box .inn>.tag__main>p {
	line-height: 100%;
}
.testimonial__wrapper .outer__testimonial .comment>p {
    visibility: hidden;
}
.testimonial__wrapper .dots .ascii-dots {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.testimonial__wrapper .dots {
	width: 1200px;
	max-width: 100%;
	height: 476px;
}
.testimonial__wrapper .dots .ascii-dots {
	-webkit-mask-image: radial-gradient(400px 300px at 50% 105%, #000 99%, rgba(0,0,0,0) 100%);
	        mask-image: radial-gradient(400px 300px at 50% 105%, #000 99%, rgba(0,0,0,0) 100%);
}
@media (max-width: 1200px) {
	.elem__article--case .slider {
		margin-top: 40px;
	}
	.case__hero .outer__case .outline img {
		max-width: 640px;
	}
	.case__hero .outer__case .outline {
		margin-top: 40px;
	}
	.case__hero {
		padding-top: 120px;
	}
	.case__hero .outer__case .desc>p {
		font-size: 14px;
	}
	.case__feed .right__box .inn {
		min-width: 290px;
		max-width: 290px;
	}
	.case__feed .outer__case .inn>.left {
		min-width: 200px;
		max-width: 200px;
	}
	.case__feed .outer__case .inn>.left>.float-left>ul>li>a {
		font-size: 20px;
		padding-bottom: 20px;
	}
	.case__feed .inner__content {
		width: calc(100% - 550px);
	}
	.testimonial__wrapper .outer__testimonial>.comment>p {
		font-size: 26px;
	}
	.testimonial__wrapper {
		padding:60px 0px;
	}
	.testimonial__wrapper .outer__testimonial .author {
		margin-top: 25px;
	}
}
@media (max-width: 991px) {
	.case__feed .inner__content .elem__article--case .services__grid>.elem>p {
		font-size: 12px;
	}
	.case__feed .inner__content .elem__article--case .services__grid>.elem {
		padding-left: 15px;
		padding-right: 15px;
	}
	.case__feed .inner__content .elem__article--case .services__grid>.elem>span {
		min-width: 36px;
		max-width: 36px;
		min-height: 36px;
		max-height: 36px;
	}
	.case__feed .inner__content .elem__article--case .services__grid>.elem>span>img {
		max-width: 16px;
	}
	.elem__article--case .slider {
		margin-top: 20px;
	}
	.case__hero .outer__case .desc>p {
		font-size: 12px;
	}
	.case__hero .outer__case .outline {
		margin-top: 25px;
	}
	.case__hero .outer__case .outline img {
		max-width: 450px;
	}
	.case__feed {
		padding:40px 0px;
	}
	.case__feed .outer__case .inn>.left {
		display: none;
	}
	.case__feed .inn {
		flex-direction: column-reverse;
	}
	.case__feed .right__box {
		margin-left: 0px;
		margin-bottom: 25px;
	}
	.case__feed .right__box .inn {
		max-width: 100%;
	}
	.case__feed .inner__content .text>p {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.case__feed .inner__content .elem__article--case {
		margin-top: 60px;
	}
	.case__feed .inner__content .text .list {
		margin-top: 25px;
		padding:15px;
	}
	.case__feed .inner__content .text .list>ul>li {
		font-size: 12px;
	}
	.case__feed .inner__content {
		width: 100%;
	}
	.testimonial__wrapper .outer__testimonial>.comment>p {
		font-size: 20px;
	}
	.testimonial__wrapper .outer__testimonial>.comment>p {
		font-size: 22px;
	}
	.testimonial__wrapper {
		padding:40px 0px;
	}
}
@media (max-width: 767px) {
	.testimonial__wrapper .outer__testimonial>.comment>p {
		font-size: 19px;
	}
	.case__hero .outer__case .desc>p br {
		display: none;
	}
	.case__hero .outer__case .desc>p {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 575px) {
	.case__hero .outer__case .outline img {
		width: 100%;
	}
}
@media (max-width: 480px) {
	.case__feed .inner__content .elem__article--case .services__grid>.elem {
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
	}
	.case__feed .inner__content .elem__article--case .services__grid>.elem>p {
		margin-left: 0px;
		margin-top: 12px;
	}
}
.elem__article--case .slider.video-slider .elem {
	min-width: 320px;
	max-width: 320px;
	margin-right: 20px;
}
.elem__article--case .slider.video-slider .elem>.inn img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.07);
}
.case__hero.no-logo {
	padding-bottom: 100px;
}
.case__hero.no-logo .outer__case .desc>p {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 1200px) {
	.case__hero.no-logo {
		padding-bottom: 80px;
	}
}
@media (max-width: 991px) {
	.case__hero.no-logo {
		padding-bottom: 60px;
	}
}
.case__hero.plain {
	background-color: #020905;
}
.case__hero.plain:before {
	display: none;
}
@media (prefers-reduced-motion: no-preference) {
	.case__hero.plain, .case__hero.plain .outer__case .desc>.h2-title, .case__hero.plain .outer__case .desc>p {
		animation: none;
	}
}
.elem__article--case .slider.video-slider .elem.email {
	min-width: 250px;
	max-width: 250px;
}
.elem__article--case .slider.video-slider .elem.email>.inn img {
	height: 430px;
	object-fit: cover;
	object-position: top;
}
.case__feed .inner__content .text .sol-img {
	margin: 10px 0 28px;
}
.case__feed .inner__content .text .sol-img img {
	width: 100%;
	
	height: auto;
	display: block;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.07);
}
.case__feed .inner__content .text .sol-video {
	margin: 10px 0 28px;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.07);
	background: #050E0A;
}
.case__feed .inner__content .text .sol-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.case__feed .inner__content .text .sol-video.is-vertical {
	aspect-ratio: 9 / 16;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 575px) {
	.case__feed .inner__content .text .sol-video.is-vertical { max-width: 100%;
	}
}
.case__feed .inner__content .text>h3 {
	margin: 48px 0 20px;
	font-family: "Rethink Sans", sans-serif;
	font-size: 24px;
	line-height: 130%;
	letter-spacing: -0.03em;
	font-weight: 500;
	color: #fff;
}
.case__feed .inner__content .text>h3:first-child {
	margin-top: 0;
}
.case__feed .inner__content .text>h4 {
	margin: 34px 0 16px;
	font-size: 15px;
	line-height: 140%;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: #00FF8A;
}
@media (max-width: 575px) {
	.case__feed .inner__content .text>h3 { font-size: 20px; margin-top: 36px;
	}
	.case__feed .inner__content .text>h4 { margin-top: 28px;
	}
}
.elem__article--case .slider.video-slider .elem.portrait {
	min-width: 336px;
	max-width: 336px;
}
.elem__article--case .slider.video-slider .elem.story {
	min-width: 236px;
	max-width: 236px;
}
.elem__article--case .slider.video-slider .elem.wide>.inn img {
	object-fit: contain;
	background: #050E0A;
}
.elem__article--case .slider.video-slider .elem.video>.inn {
	position: relative;
	height: 420px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.07);
	background: #050E0A;
}
.elem__article--case .slider.video-slider .elem.video>.inn iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.elem__article--case .slider.video-slider .elem.video>.inn .vid-facade__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 0;
}

/* --- agency glue for the case detail port --- */
.case__hero .outer__case .desc>.h2-title { margin: 0 0 30px; }
.case__hero .outer__case .outline img { max-height: 48px; max-width: 220px; width: auto; filter: brightness(0) invert(1); }
.case__hero { padding-bottom: 100px; }
.testimonial__wrapper .comment { margin: 24px 0 0; }
.testimonial__wrapper .outer__testimonial>.comment>p { visibility: hidden; }
.testimonial__wrapper .rv__mono { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.testimonial__wrapper .dots { width: 1200px; max-width: 100%; aspect-ratio: 2 / 1; }
.testimonial__wrapper .dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.case__feed .inner__content .services__grid>a.elem { color: inherit; text-decoration: none; }
.case__feed .inner__content .text a { color: var(--green); }
.elem__article--case { position: relative; }
.elem__article--case .slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding-right: 30%; }
.elem__article--case .slider::-webkit-scrollbar { display: none; }
.elem__article--case .slider .elem { flex: 0 0 auto; scroll-snap-align: start; margin-right: 20px; }
.elem__article--case .slider .elem>.inn { position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.elem__article--case .slider .elem>.inn .tile__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.elem__article--case .slick-next { position: absolute; top: calc(50% + 40px); right: 30px; cursor: pointer; }
.elem__article--case .slider:before { position: sticky; flex: 0 0 0; margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
	.testimonial__wrapper .outer__testimonial>.comment>p { visibility: visible; }
}
/* valiant.app separates value and label with an em dash, which the agency copy rules forbid; a gap instead */
.case__feed .inner__content .text .list li b { margin-right: 8px; color: #fff; }

/* --- "Where growth stalls" (Ben's point 16): valiant.app's sechead rhythm,
   28px between the title and the list and between items; ringed card --- */
.market__pains { padding: 36px 34px; border-color: transparent; background: var(--fnl-card-bg); box-shadow: var(--fnl-inner-light); }
.market__pains::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.market__pains-title { margin: 0 0 28px; }
.market__pains ol { gap: 28px; }
.market__pains li { padding-top: 28px; gap: 14px; }
.market__pain { margin: 0 0 8px; font-size: 19px; line-height: 1.25; }
.market__pains p { font-size: 16px; line-height: 1.55; font-weight: 300; letter-spacing: -0.02em; }
@media (max-width: 767px) { .market__pains { padding: 26px 22px; } .market__pains-title { margin-bottom: 22px; } .market__pains ol { gap: 22px; } .market__pains li { padding-top: 22px; } }

/* ============================================================================
   TECHNOLOGY HEROES: extracted verbatim from valiant.app's pre-light
   css/style.css (.hero__brain, .hero__bottom, .hero__middle, .hero-typing,
   .hero__analytics, their keyframes and media queries). Do not restyle here.
   ========================================================================== */
.gradient-analytics>img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top;
}
.gradient-analytics {
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
}
/* valiant.app's .container is position: relative site-wide; ours is not, so the
   hero content would sit under the absolute glow (Ben's point 17). */
.hero__analytics > .container { position: relative; }
.hero__analytics .cards-left {
	position: absolute;
	left:0px;
	bottom:0px;
	max-width: 400px;
}
.hero__analytics {
	overflow:hidden;
	padding-top: 207px;
	padding-bottom: 206px;
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.hero__analytics .dots-analytics>img {
	max-width: 100%;
}
.hero__analytics .dots-analytics {
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:0px;
	width: 100%;
	max-width: 1400px;
	aspect-ratio: 1400 / 463;
	opacity:.1;
	pointer-events: none;
}
.hero__analytics>.card-right {
	position: absolute;
	right:0px;
	z-index: 2;
	bottom:280px;
	max-width: 220px;
}
@media (prefers-reduced-motion: no-preference) {
	.hero__analytics>.card-right {
		animation: cardRightIn 1.1s cubic-bezier(.22,.61,.36,1) .6s both;
	}
}
@keyframes cardRightIn {
	from{ opacity:0; transform: translateX(130%); }
	to{ opacity:1; transform: none; }
}
.hero__analytics .dots-analytics .ascii-dots {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
.hero__analytics>.circle-side {
	position: absolute;
	right:0px;
	bottom:0px;
	opacity:.3;
}
.hero__analytics .btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap:15px;
}
.hero__analytics .outer__hero>p {
	text-align: center;
	margin-top: 0px;
	font-size: 16px;
	line-height: 130%;
	color:#83B59F;
	letter-spacing: -0.03em;
	text-align: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.hero__analytics .outer__hero .h2-title {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 30px;
}
.hero__analytics .outer__hero .media-analytics {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 50px;
}
.hero__analytics .outer__hero {
	position: relative;
	z-index: 2;
}
.hero__analytics .btns {
	margin-top: 40px;
}
.hero__analytics .media-analytics .stat-stack {
	position: relative;
	width: 300px;
	height: 128px;
	transform-origin: center top;
}
@media (max-width: 991px) {
	.hero__analytics .media-analytics .stat-stack { transform: scale(.82);
	}
}
@media (max-width: 767px) {
	.hero__analytics .media-analytics .stat-stack { transform: scale(.7);
	}
}
@media (max-width: 480px) {
	.hero__analytics .media-analytics .stat-stack { transform: scale(.56);
	}
}
.hero__analytics .media-analytics .stat-card {
	position: absolute;
	inset: 0;
	border-radius: 18px;
	overflow: hidden;
	-webkit-backdrop-filter: blur(16px);
	        backdrop-filter: blur(16px);
	box-shadow: 0 24px 50px -24px rgba(0,0,0,.6);
	transform-origin: 50% 50%;
	transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
	will-change: transform, opacity;
}
.hero__analytics .outer__hero .media-analytics .stat-card img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}
@keyframes cards-left-in {
	from{ opacity: 0; transform: translate(-60px, 60px); }
	to{ opacity: 1; transform: translate(0, 0); }
}
.hero__analytics .cards-left {
	animation: cards-left-in 1.3s cubic-bezier(.22,.61,.36,1) .15s both;
	will-change: opacity, transform;
}
@keyframes circle-spin { to{ transform: rotate(360deg); } }
.hero__analytics>.circle-side {
	--cs: 700px;
	width: var(--cs);
	height: var(--cs);
	max-width: none;
	right: calc(var(--cs) / -2);
	bottom: calc(var(--cs) / -2);
	transform-origin: 50% 50%;
	animation: circle-spin 34s linear infinite;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.hero__analytics .cards-left, .hero__analytics>.circle-side { animation: none;
	}
}
.hero__analytics {
	background-color: #091811;
}
.hero__brain:before {
	content:"";
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,.3);
}
.hero__brain {
	position: relative;
}
@media (max-width: 1200px) {
	.hero__analytics>.card-right {
		max-width: 140px;
		bottom: 180px;
	}
}
.hero__bottom {
	position: relative;
	border-bottom:1px solid rgba(255,255,255,.1);
}
.hero__bottom video {
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__bottom .outer__hero>p {
	margin:0px;
	font-size: 16px;
	line-height: 130%;
	color:#83B59F;
	letter-spacing: -0.03em;
	max-width: 520px;
}
.hero__bottom .outer__hero .btns {
	display: flex;
	justify-content: flex-start;
	margin-top: 40px;
	gap:15px;
}
.hero__bottom .outer__hero {
	min-height: 855px;
	display: flex;
	flex-direction: column;
	padding-bottom: 120px;
	position: relative;
	z-index: 2;
	align-items: flex-start;
	justify-content:flex-end;
}
.hero__middle .outer__hero .btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap:15px;
	margin-top: 40px;
}
.hero__middle .outer__hero>p {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 560px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 16px;
	line-height: 130%;
	color:#83B59F;
}
.hero__middle .outer__hero {
	min-height: 855px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 120px;
}
.hero__middle>img {
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	max-width: 1132px;
}
.hero__middle {
	position: relative;
	background-repeat: no-repeat!important;
	background-size: cover!important;
	background-position: bottom center!important;
	z-index: 2;
	border-bottom:1px solid rgba(255,255,255,.07);
}
.hero__brain {
	position: relative;
	z-index: 2;
	background-repeat: no-repeat!important;
	background-size: cover!important;
	border-bottom:1px solid rgba(255,255,255,.07);
	background-position: bottom center!important;
}
.hero__brain .h2-title {
	font-weight: 500;
}
.hero__brain .outer__hero>p {
	margin:0px;
	font-size: 16px;
	line-height: 130%;
	letter-spacing: -0.03em;
	color:#83B59F;
	max-width: 380px;
}
.hero__brain .outer__hero .btns {
	display: flex;
	justify-content: flex-start;
	margin-top: 40px;
	gap:15px;
}
.hero__brain .outer__hero {
	min-height: 855px;
	display: flex;
	flex-direction: column;
	align-items:flex-start;
	justify-content: flex-end;
	padding-bottom: 120px;
}
.hero__middle .outer__hero {
	position: relative;
	z-index: 3;
}
.hero__middle.hero-typing .outer__hero>p {
	max-width: 640px;
}
.hero__middle.hero-typing .h2-title {
	text-align: center;
}
.hero__middle.hero-typing {
	position: relative;
	background:none!important;
	background-color: #010303!important;
}
.hero__middle>video {
	max-height: calc(100% + 120px);
	height: calc(100% + 120px);
	max-width: 100%;
	width: 100%;
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	top:-280px;
	opacity:.75;
}
.hero__brain .outer__hero {
	position: relative;
	z-index: 2;
}
@media (max-width: 1200px) {
	.hero__brain {
		position: relative;
	}
	.hero__brain:before {
		content:"";
		position: absolute;
		left:0px;
		top:0px;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,.3);
		z-index: 2;
	}
	.hero__brain .brain-vid-box.vid-cover>video {
		object-position: 0% center!important;
	}
	.hero__middle>video {
		top:-220px;
	}
	.hero__analytics .outer__hero .h2-title {
		margin-bottom: 20px;
	}
	.hero__analytics .outer__hero .media-analytics {
		margin-bottom: 35px;
	}
	.hero__analytics .btns {
		margin-top: 25px;
	}
	.hero__analytics .cards-left {
		max-width: 240px;
	}
	.hero__analytics {
		padding-top: 120px;
		padding-bottom: 120px;
	}
	.hero__analytics .outer__hero .media-analytics {
		margin-bottom: 35px;
	}
	.hero__analytics .outer__hero>p {
		font-size: 14px;
	}
	.hero__analytics>.circle-side {
		width: 400px;
		height: 400px;
		right:-200px;
		bottom:-200px;
	}
	.hero__brain .outer__hero .btns {
		margin-top: 30px;
	}
	.hero__middle .outer__hero .btns {
		margin-top: 30px;
	}
	.hero__middle {
		overflow:hidden;
	}
	.hero__middle>img {
		max-width: 940px;
	}
	.hero__brain .outer__hero {
		min-height: 600px;
		padding-bottom: 40px;
	}
	.hero__brain .outer__hero>p {
		font-size: 14px;
	}
	.hero__middle .outer__hero {
		min-height: 600px;
		padding-bottom: 40px;
	}
	.hero__bottom .outer__hero {
		min-height: 600px;
		padding-bottom: 40px;
	}
	.hero__middle .outer__hero>p {
		font-size: 14px;
	}
	.hero__bottom .outer__hero>p {
		font-size: 14px;
	}
	.hero__bottom .outer__hero .btns {
		margin-top: 25px;
	}
}
.hero__brain {
	position: relative;
}
.hero__brain>video {
	position: absolute;
	top:0px;
	right:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 991px) {
	.hero__analytics>.card-right {
		max-width: 100px;
		bottom:150px;
	}
	.hero__analytics .cards-left {
		max-width: 170px;
	}
	.hero__analytics .outer__hero .media-analytics img {
		max-width: 240px;
	}
	.hero__analytics .outer__hero>p {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	.hero__analytics .outer__hero>p {
		font-size: 12px;
	}
	.hero__brain:before {
		content:"";
		position: absolute;
		left:0px;
		top:0px;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.3);
	}
	.hero__brain .outer__hero {
		position: relative;
		z-index: 2;
	}
	.hero__brain .outer__hero .btns {
		margin-top: 20px;
	}
	.hero__brain .outer__hero>p {
		font-size: 12px;
	}
	.hero__middle .outer__hero .btns {
		margin-top: 20px;
	}
	.hero__middle .outer__hero {
		text-align: center;
	}
	.hero__middle .outer__hero>p {
		font-size: 12px;
		max-width: 400px;
	}
	.hero__bottom .outer__hero>p {
		font-size: 12px;
		max-width: 400px;
	}
}
@media (max-width: 767px) {
	.hero__brain .brain-vid-box.vid-cover>video {
		object-position: 20% center!important;
	}
	.hero__brain .outer__hero .btns {
		flex-wrap: wrap;
	}
	.hero__middle>video {
		top:-230px;
	}
	.hero__analytics .outer__hero br {
		display: none;
	}
	.hero__analytics .btns {
		flex-wrap: wrap;
	}
	.hero__middle>video {
		object-position: top;
		object-fit: cover;
	}
	.hero__middle.hero-typing .h2-title br {
		display: none;
	}
	.hero__middle.hero-typing .outer__hero>p br {
		display: none;
	}
	.hero__analytics .outer__hero .media-analytics {
		margin-bottom: 0px;
	}
	.hero__analytics .cards-left {
		max-width: 135px;
	}
	.hero__analytics>.circle-side {
		width: 200px;
		height: 200px;
		right: -75px;
		bottom:-75px;
	}
	.hero__middle>img {
		max-width: 740px;
	}
}
@media (max-width: 575px) {
	.hero__brain .brain-vid-box.vid-cover>video {
		object-position: 30% center!important;
	}
	.hero__middle>video {
		height: 100%;
	}
	.hero__middle .outer__hero .btns {
		flex-wrap:wrap;
	}
}
@media (max-width: 480px) {
	.hero__analytics .outer__hero .media-analytics {
		margin-bottom: -20px;
	}
}
.hero__brain {
	background-color: #020905;
	overflow: hidden;
}
.hero__brain .brain-vid-box {
	position: absolute;
	z-index: 0;
}
.hero__brain .brain-vid-box>video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
}
.hero__brain .brain-vid-box:before, .hero__brain .brain-vid-box:after {
	content:"";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 22%;
	z-index: 1;
	pointer-events: none;
}
.hero__brain .brain-vid-box:before {
	left: 0;
	background: linear-gradient(to right, #020905, rgba(2,9,5,0));
}
.hero__brain .brain-vid-box:after {
	right: 0;
	background: linear-gradient(to left, #020905, rgba(2,9,5,0));
}
.hero__brain>.container {
	position: relative;
	z-index: 2;
}
.hero__brain .brain-vid-box.vid-cover>video {
	object-fit: cover;
	object-position: 72% center;
}
.hero__brain .brain-vid-box.vid-cover:before, .hero__brain .brain-vid-box.vid-cover:after {
	display: none;
}

/* --- agency glue for the technology heroes --- */
.hero__brain .outer__hero>.h2-title, .hero__bottom .outer__hero>.h2-title, .hero__middle .outer__hero>.h2-title, .hero__analytics .outer__hero>.h2-title { margin: 0 0 30px; }
.tech-hero__note { margin: 24px 0 0; color: var(--ink-dim); font-size: 13px; letter-spacing: -0.02em; }
.hero__analytics .dots-analytics canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* valiant.app breaks the AI Brain headline over three lines so it stays left of the brain film */
.hero__brain .outer__hero>.h2-title { max-width: 560px; }
.hero__brain .outer__hero>p { max-width: 460px; }

/* --- technology: what it shows / what the team does, as ringed panels --- */
.tech-duo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tech-duo__panel { position: relative; padding: 40px 36px; border-radius: var(--fnl-r-card); background: var(--fnl-card-bg); box-shadow: var(--fnl-inner-light); }
.tech-duo__panel::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.tech-duo__panel .sec-head { margin-bottom: 32px; }
.tech-duo__panel .h2 { font-size: 40px; line-height: 95%; }
@media (max-width: 991px) { .tech-duo__grid { grid-template-columns: 1fr; } .tech-duo__panel .h2 { font-size: 34px; } }
@media (max-width: 767px) { .tech-duo__panel { padding: 28px 22px; } .tech-duo__panel .h2 { font-size: 32px; } }

/* ============================================================================
   REVIEWS PAGE: extracted verbatim from valiant.app's pre-light css/style.css
   (.reviews__hero, .single__review, .reviews__wrapper, .quote__wall,
   .light-rays and the qp reveal, with their media queries).
   ========================================================================== */
.reviews__wrapper>.dots {
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	top:0px;
	width: 1440px;
	max-width: 100%;
	aspect-ratio: 1440 / 1462;
	height: auto;
	opacity:.1;
	z-index: 1;
	pointer-events: none;
}
.reviews__wrapper>.dots canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.reviews__wrapper {
	padding-top: 100px;
	position: relative;
	z-index: 2;
	padding-bottom: 100px;
	border-bottom: 1px solid rgba(255,255,255,.07);
	overflow: hidden;
}
.reviews__wrapper>.light-rays {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: screen;
	filter: blur(14px);
	opacity: .7;
}
.reviews__wrapper .quote__wall.qp-anim>.elem {
	opacity: 0;
	translate: 0 54px;
	transition: opacity 1.1s ease, translate 1.35s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, translate;
}
.reviews__wrapper .quote__wall.qp-anim>.elem.qp-in {
	opacity: 1;
	translate: 0 0;
}
.reviews__wrapper .outer__reviews>.top {
	margin-bottom: 60px;
}
.reviews__wrapper .outer__reviews>.top>p {
	margin:0px;
	font-size: 14px;
	line-height: 130%;
	letter-spacing: -0.03em;
	color:#83B59F;
}
.quote__wall {
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.quote__wall .grid-sizer, .quote__wall .elem {
	width: calc((100% - 40px) / 3);
}
.quote__wall .elem .top__quote>span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.quote__wall .elem .top__quote>.list {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.quote__wall .elem .top__quote>.list>ul>li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.quote__wall .elem .top__quote>.list>ul {
	display: flex;
	gap:5px;
	align-items: center;
	list-style-type: none;
	margin:0px;
	justify-content: flex-start;
}
.quote__wall .elem {
	backdrop-filter: blur(20px);
}
.quote__wall .elem>.text {
	margin-bottom: 30px;
}
.quote__wall .elem .author {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.quote__wall .elem .author>.author__info>p {
	margin:0px;
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 90%;
	color:#83B59F;
	font-weight: 500;
}
.quote__wall .elem .author>.author__info>span {
	display: block;
	font-size: 10px;
	line-height: 130%;
	color:#5E8272;
	font-weight: 300;
}
.quote__wall .elem .author>.author__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.quote__wall .elem .author>.media.profile>img {
	min-width: 30px;
	max-width: 30px;
	min-height: 30px;
	max-height: 30px;
	object-fit: cover;
	border-radius: 250px;
}
.quote__wall .elem .author>.media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	min-width: 30px;
	max-width: 30px;
	min-height: 30px;
	max-height: 30px;
	border-radius: 250px;
	border:1px solid rgba(255,255,255,.07);
}
.quote__wall .elem >.text>p {
	margin:0px;
	font-size: 14px;
	line-height: 160%;
	letter-spacing: -0.03em;
	color:#5E8272;
}
.reviews__wrapper .quote__wall.qp-anim>.elem {
	backdrop-filter: blur(26px) saturate(1.35);
	-webkit-backdrop-filter: blur(26px) saturate(1.35);
}
.quote__wall .elem .top__quote {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.quote__wall .elem {
	border-radius: 18px;
	border:1px solid rgba(255,255,255,.07);
	padding:25px;
	margin-bottom: 20px;
	background:linear-gradient(to top right , rgba(255,255,255,.02) ,rgba(255,255,255,.14));
	backdrop-filter: blur(24px) saturate(1.15);
	-webkit-backdrop-filter: blur(24px) saturate(1.15);
}
.quote__wall.qw-anim .elem { opacity:0; transition: opacity .7s ease;
}
.quote__wall.qw-anim .elem.qw-in { opacity:1;
}
.reviews__wrapper {
	position: relative;
}
.reviews__wrapper .outer__reviews {
	position: relative;
	z-index: 2;
}
.reviews__wrapper .ascii-dots {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	display: block;
	opacity: 1;
}
.reviews__hero .outer__reviews>p {
	margin:0px;
	font-size: 16px;
	line-height: 130%;
	letter-spacing: -0.03em;
	color:#83B59F;
}
.reviews__hero .outer__reviews .single__review--wrapper {
	margin-top: 60px;
}
.reviews__hero {
	border-bottom:1px solid rgba(255,255,255,.07);
}
.single__review--wrapper {
	max-width: 550px;
	width: 100%;
}
.single__review--wrapper .controls {
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:20px;
}
.single__review--wrapper .single__review--slider .slide>.inn .author>img {
	min-width: 60px;
	max-width: 60px;
}
.single__review--wrapper .single__review--slider .slide>.inn.dark>h2, .single__review--wrapper .single__review--slider .slide>.inn.dark .desc>p {
	color:#000000;
}
.single__review--wrapper .single__review--slider .slide>.inn.dark .desc>span {
	color:rgba(0,0,0,.5);
}
.single__review--wrapper .single__review--slider .slide>.inn.light>h2, .single__review--wrapper .single__review--slider .slide>.inn.light .desc>p {
	color:#fff;
}
.single__review--wrapper .single__review--slider .slide>.inn.light .desc>span {
	color:rgba(255,255,255,.5);
}
.single__review--wrapper .single__review--slider .slide>.inn.light .author .spacer {
	background:linear-gradient(to bottom , rgba(255,255,255,.4) , rgba(255,255,255,0));
}
.single__review--wrapper .single__review--slider .slide>.inn .author>.desc>span {
	display: block;
	font-size: 10px;
	line-height: 130%;
	letter-spacing: -0.03em;
}
.single__review--wrapper .single__review--slider .slide>.inn .author>.desc>p {
	margin:0px;
	margin-bottom: 5px;
	font-size: 500;
	font-size: 14px;
	line-height: 90%;
	letter-spacing: -0.03em;
}
.single__review--wrapper .single__review--slider .slide>.inn .author>.desc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.single__review--wrapper .single__review--slider .slide>.inn .author>.spacer {
	min-width: 1px;
	min-height: 31px;
	margin:0px 15px;
	background:linear-gradient(to bottom, rgba(0,0,0,.1) , rgba(0,0,0,0));
}
.single__review--wrapper .single__review--slider .slide>.inn .author {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.single__review--wrapper .single__review--slider .slide>.inn>h2 {
	margin-top: 0px;
	margin-bottom: 50px;
	font-size: 32px;
	line-height: 110%;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.single__review--wrapper .single__review--slider .slide>.inn {
	padding:30px;
	border-radius: 12px;
}
.single__review--wrapper .single__review--slider {
	width: calc(100% - 70px);
	padding:20px;
	background:linear-gradient(to top right , rgba(255,255,255,0) , rgba(255,255,255,.07));
	backdrop-filter:blur(20px);
	border:1px solid rgba(255,255,255,.07);
	border-radius: 18px;
	position: relative;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;

	transition: height .55s cubic-bezier(.22,.61,.36,1);
}
.single__review--wrapper .single__review--slider .slide {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .65s cubic-bezier(.22,.61,.36,1),
	            transform .65s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
	pointer-events: none;
}
.single__review--wrapper .single__review--slider .slide.is-active {
	opacity: 1;
	transform: translateY(0);
	z-index: 2;
	pointer-events: auto;
}
.single__review--wrapper .controls>button {
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.single__review--wrapper .controls>button:hover {
	transform: translateY(-2px);
}
.single__review--wrapper .controls>button:active {
	transform: scale(.94);
}
.single__review--wrapper .controls>button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	max-width: 50px;
	min-height: 50px;
	max-height: 50px;
	border-radius: 250px;
	border:1px solid rgba(255,255,255,.07);
	background:linear-gradient(to top right , rgba(255,255,255,0) , rgba(255,255,255,.07));
}
.single__review--wrapper {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
}
.reviews__hero {
	padding-top: 220px;
	padding-bottom: 145px;
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.reviews__hero>.container {
	position: relative;
	z-index: 2;
}
.reviews__hero .hero-fx {
	position: absolute;
	inset:0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
.reviews__hero .hero-fx .hero-rays {
	position: absolute;
	inset:-25% -25% 0;
	pointer-events: none;
	mix-blend-mode: screen;
	will-change: background;
	transform-origin: 50% 0;
}
.reviews__hero .hero-fx .hero-rays--back {
	--ray-angle: 0deg;
	background: repeating-conic-gradient(
		from var(--ray-angle) at 50% -12%,
		rgba(74,255,136,0) 0deg,
		rgba(120,255,180,.10) 1.4deg,
		rgba(74,255,136,0) 3deg,
		rgba(74,255,136,0) 7.5deg
	);
	-webkit-mask: radial-gradient(125% 105% at 50% -12%, #000 8%, rgba(0,0,0,.5) 34%, transparent 72%);
	        mask: radial-gradient(125% 105% at 50% -12%, #000 8%, rgba(0,0,0,.5) 34%, transparent 72%);
	filter: blur(2.5px);
	animation: ray-sway-a 19s ease-in-out infinite,
	           ray-breathe 11s ease-in-out infinite;
}
.reviews__hero .hero-fx .hero-rays--front {
	--ray-angle: 0deg;
	background: repeating-conic-gradient(
		from var(--ray-angle) at 50% -12%,
		rgba(0,255,138,0) 0deg,
		rgba(0,255,138,.16) 2.6deg,
		rgba(160,255,200,.26) 5deg,
		rgba(0,255,138,0) 9deg,
		rgba(0,255,138,0) 19deg
	);
	-webkit-mask: radial-gradient(130% 110% at 50% -12%, #000 6%, rgba(0,0,0,.45) 30%, transparent 68%);
	        mask: radial-gradient(130% 110% at 50% -12%, #000 6%, rgba(0,0,0,.45) 30%, transparent 68%);
	filter: blur(7px);
	animation: ray-sway-b 27s ease-in-out infinite,
	           ray-breathe 14s ease-in-out infinite;
}
.reviews__hero .hero-fx .hero-beam {
	position: absolute;
	inset:0;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(40% 36% at 50% -10%,
		rgba(0,255,138,.34) 0%,
		rgba(0,255,138,.1) 42%,
		transparent 72%);
	animation: ray-breathe 9s ease-in-out infinite;
}
.reviews__hero .hero-fx .hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: screen;
	filter: blur(110px);
	will-change: transform;
}
.reviews__hero .hero-fx .hero-glow--1 {
	width: 60vw;
	height: 60vw;
	left:-10vw;
	bottom:-25vw;
	background: radial-gradient(circle, rgba(74,255,136,.16), transparent 65%);
	animation: glow-float-1 26s ease-in-out infinite;
}
.reviews__hero .hero-fx .hero-glow--2 {
	width: 55vw;
	height: 55vw;
	right:-12vw;
	bottom:-20vw;
	background: radial-gradient(circle, rgba(0,255,138,.14), transparent 65%);
	animation: glow-float-2 32s ease-in-out infinite;
}
.reviews__hero .hero-fx .particles {
	position: absolute;
	inset:0;
	width: 100%;
	height: 100%;
	display: block;
	mix-blend-mode: screen;
}
.quote__wall .elem .author>.media { position: relative; border-color: transparent;
}
.quote__wall .elem .author>.media::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.quote__wall .elem { position: relative; border-color: transparent;
}
.quote__wall .elem::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.single__review--wrapper .single__review--slider { position: relative; border-color: transparent;
}
.single__review--wrapper .single__review--slider::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.single__review--wrapper .controls>button { position: relative; border-color: transparent;
}
.single__review--wrapper .controls>button::before {
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:var(--grad-border);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2;
}
.quote__wall .elem {
	background-color: rgba(0,0,0,.4)!important;
}
.quote__wall .elem >.text>p {
	color:#83B59F;
}
.how__works .how-fx>.light-rays {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: screen;
	filter: blur(14px);
	opacity: .7;
}
.reviews__hero {
	position: relative;
}
.reviews__hero:before {
	content:"";
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color:rgba(0,0,0,.3);
}
.reviews__hero .outer__reviews {
	position: relative;
	z-index: 5;
	text-align: center;
}
.reviews__hero>video {
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.reviews__hero {
	padding:0px;
}
.reviews__hero .outer__reviews {
	min-height: 892px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 200px;
}
.reviews__hero .outer__reviews .single__review--wrapper .controls {
	display: none;
}
.single__review--wrapper .single__review--slider {
	width: 100%;
}
.single__review--wrapper .single__review--slider .slide>.inn>h2 {
	text-align: left;
}
.reviews__hero .outer__reviews .single__review--wrapper {
	width: 100%;
	max-width: 651px;
}
.reviews__wrapper .top .pre-title {
	text-align: center;
}
.reviews__wrapper .top {
	text-align: center;
}
@media (prefers-reduced-motion: reduce) {
	.reviews__hero .hero-fx .hero-rays, .reviews__hero .hero-fx .hero-glow {
		animation: none;
	}
}
@media (max-width: 1200px) {
	.reviews__hero .outer__reviews .single__review--wrapper {
		margin-top: 35px;
	}
}
@media (max-width: 991px) {
	.single__review--wrapper .single__review--slider .slide>.inn>h2 {
		margin-bottom: 25px;
	}
	.reviews__hero .outer__reviews {
		min-height: 640px;
		padding-top: 120px;
	}
	.reviews__hero .outer__reviews .single__review--wrapper {
		margin-top: 15px;
	}
	.single__review--wrapper .single__review--slider {
		padding:12px;
	}
	.single__review--wrapper .single__review--slider .slide {
		top:12px;
		left:12px;
		right: 12px;
	}
	.reviews__wrapper .outer__reviews>.top {
		margin-bottom: 30px;
	}
	.reviews__wrapper {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.quote__wall .grid-sizer, .quote__wall .elem {
		width: calc((100% - 20px) / 2);
	}
	.single__review--wrapper .single__review--slider .slide>.inn>h2 {
		font-size: 24px;
	}
	.single__review--wrapper .single__review--slider .slide>.inn {
		padding:20px;
	}
}
@media (max-width: 767px) {
	.reviews__hero .outer__reviews>p {
		font-size: 14px;
	}
	.reviews__hero .outer__reviews>p br {
		display: none;
	}
	.reviews__hero .outer__reviews .single__review--wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height:auto!important;
	}
	.single__review--wrapper .controls {
		margin-left: 0px;
		flex-direction: row;
		margin-top: 15px;
		align-items: center;
		justify-content: center;
	}
	.single__review--wrapper .single__review--slider {
		width: 100%;
	}
}
@media (max-width: 575px) {
	.quote__wall .grid-sizer, .quote__wall .elem {
		width: 100%;
	}
}
.quote__wall .elem {
	backdrop-filter: blur(24px) saturate(1.45);
	-webkit-backdrop-filter: blur(24px) saturate(1.45);
	background: linear-gradient(to top right, rgba(255,255,255,.02), rgba(255,255,255,.05));
}

/* --- agency glue: CSS columns stand in for Isotope's masonry (same 3 columns,
   20px gutter, 1000px max) --- */
.reviews__hero { position: relative; overflow: hidden; }
.reviews__hero>video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.reviews__hero .outer__reviews { position: relative; z-index: 2; }
.reviews__hero .outer__reviews>.h2-title { margin: 0 0 30px; }
.quote__wall { columns: 3; column-gap: 20px; }
.quote__wall .elem { width: auto; display: inline-block; break-inside: avoid; margin: 0 0 20px; }
.quote__wall .elem .text { margin: 0 0 30px; }
.quote__wall .elem .text p { margin: 0; }
.quote__wall .elem .text .qw-pull { margin: 0 0 10px; color: #fff; font-weight: 600; }
.quote__wall .elem .list ul { display: flex; margin: 0; padding: 0; list-style: none; }
.qw-mono { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--green); background: var(--green-10); font-weight: 600; border-radius: inherit; }
.qw-mono--slide { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; background: rgba(0, 0, 0, .12); color: inherit; }
.reviews__wrapper { position: relative; overflow: hidden; }
.reviews__wrapper>.light-rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.reviews__wrapper>.dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.reviews__wrapper .outer__reviews { position: relative; z-index: 2; }
.reviews__wrapper .outer__reviews>.top { text-align: center; }
.reviews__wrapper .outer__reviews>.top>.h2-title { margin: 18px 0 20px; }
.single__review--slider { position: relative; overflow: hidden; transition: height .6s cubic-bezier(.22,.61,.36,1); }
.single__review--slider .slide { position: absolute; inset: 0 0 auto 0; opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.single__review--slider .slide.is-active { position: relative; }
@media (max-width: 991px) { .quote__wall { columns: 2; } }
@media (max-width: 575px) { .quote__wall { columns: 1; } }

.single__review--wrapper .controls>button { padding: 0; color: inherit; font: inherit; }

/* --- /process: the Webflow step photos beside each step (plan §10) --- */
.timeline--photos { max-width: 1100px; }
.timeline--photos .timeline__step { grid-template-columns: 70px 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.timeline__photo { margin: 0; aspect-ratio: 600 / 570; border-radius: var(--fnl-r-media); overflow: hidden; border: var(--fnl-border); box-shadow: var(--fnl-media-shadow); }
.timeline__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) {
	.timeline--photos .timeline__step { grid-template-columns: 70px minmax(0, 1fr); }
	.timeline__photo { grid-column: 2; max-width: 320px; }
	.timeline--photos .timeline__body { grid-column: 2; }
}
@media (max-width: 767px) { .timeline__photo { max-width: 100%; aspect-ratio: 16 / 10; } }

/* --- /results: tiles carry the gradient ring --- */
.proof__list--results li { position: relative; border-radius: var(--fnl-r-card); background: var(--fnl-card-bg); box-shadow: var(--fnl-inner-light); }
.proof__list--results li::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.proof__list--results li { padding: 26px 24px 28px; border-top: 0; }
@media (max-width: 480px) { .proof__list--results li { padding: 20px 18px; } }

/* --- technology: real portal captures in a framed stage (plan §9) --- */
.tech-shot__grid { display: grid; gap: 24px; align-items: start; }
.tech-shot__grid--n2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.tech-shot--tall .tech-shot__grid { max-width: 520px; margin: 0 auto; }
.tech-shot__frame { position: relative; margin: 0; padding: 10px; border-radius: 22px; background: var(--fnl-card-bg); box-shadow: var(--fnl-media-shadow); }
.tech-shot__frame::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.tech-shot__frame img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 991px) { .tech-shot__grid--n2 { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .tech-shot__frame { padding: 6px; border-radius: 16px; } .tech-shot__frame img { border-radius: 11px; } }

/* ==========================================================================
   Split feature rows: valiant.app .fnl-fs, verbatim (funnel.css 197-208,
   2685-2735, 2736-2747, 4185-4205, 4455-4500, 5427-5433), plus the agency
   stage of layered real screens (Ben's points 9, 12, 14, 35).
   ========================================================================== */
.fnl-fs { position: relative; padding-top: var(--fnl-secpad); padding-bottom: var(--fnl-secpad); }
.fnl-fs__grid { display: grid; grid-template-columns: 520px 1fr; column-gap: 60px; align-items: center; }
.fnl-fs__copy { grid-column: 1; grid-row: 1; text-align: left; }
.fnl-fs__media { grid-column: 2; grid-row: 1; position: relative; }
.fnl-fs--media-right .fnl-fs__copy { grid-column: 1; }
.fnl-fs--media-right .fnl-fs__media { grid-column: 2; }
.fnl-fs--media-left .fnl-fs__copy { grid-column: 2; }
.fnl-fs--media-left .fnl-fs__media { grid-column: 1; }
.fnl-fs--media-left .fnl-fs__grid { grid-template-columns: 1fr 520px; }
.fnl-fs__copy .pill { margin-bottom: 18px; }
.fnl-fs__frame { position: relative; width: 100%; aspect-ratio: 700 / 438; border-radius: var(--fnl-r-media); overflow: hidden; border: var(--fnl-border); background: var(--fnl-stage); box-shadow: var(--fnl-media-shadow); }
.fnl-fs--media-left { background-image: linear-gradient(83deg, rgba(0, 255, 138, 0) 30%, rgba(0, 255, 138, .03) 100%); }
.fnl-fs--media-right { background-image: linear-gradient(263deg, rgba(0, 255, 138, 0) 30%, rgba(0, 255, 138, .03) 100%); }
.h2--col { font-size: 40px; line-height: .95; max-width: 520px; }
.sub--col { max-width: 480px; margin-top: 18px; }
.biz-fs__points { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; max-width: 480px; }
.biz-fs__points li { position: relative; padding-left: 28px; color: var(--ink-sub); font-size: 16px; line-height: 1.45; letter-spacing: -0.02em; }
.biz-fs__points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 255, 138, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2300FF8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.biz-fs { padding-top: 90px; padding-bottom: 90px; }
@media (max-width: 767px) { .biz-fs { padding-top: 56px; padding-bottom: 56px; } }
.shot-stage { background: radial-gradient(120% 90% at 50% 0%, rgba(0, 255, 138, .10), rgba(0, 255, 138, 0) 60%), var(--fnl-stage); }
.shot-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 6; }
.shot-stage__glow { position: absolute; left: 50%; bottom: -40%; width: 80%; height: 70%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 255, 138, .12), rgba(0, 255, 138, 0)); pointer-events: none; }
.shot-stage__layer { position: absolute; height: auto; max-width: none; border-radius: 12px; }
.shot-stage__layer--primary { z-index: 2; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .75); }
.shot-stage__layer--secondary { z-index: 3; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .85); }
.shot-stage__layer--phone { z-index: 4; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; border: 3px solid #0d1f17; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -18px rgba(0, 0, 0, .85); }
.shot-stage__chip { position: absolute; left: 18px; bottom: 18px; z-index: 5; margin: 0; padding: 9px 14px; border-radius: 999px; border: var(--fnl-glass-border); background: var(--fnl-glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink-sub); font-size: 13px; letter-spacing: -0.02em; }
.shot-stage__chip b { color: var(--green); font-weight: 600; }
@media (max-width: 1200px) {
	.fnl-fs__grid { grid-template-columns: 470px 1fr; column-gap: 40px; }
	.fnl-fs--media-left .fnl-fs__grid { grid-template-columns: 1fr 470px; }
	.h2--col { font-size: 36px; max-width: 470px; }
}
@media (max-width: 991px) {
	.fnl-fs__grid, .fnl-fs--media-left .fnl-fs__grid, .fnl-fs--media-right .fnl-fs__grid { grid-template-columns: 1fr; row-gap: 32px; }
	.fnl-fs__copy, .fnl-fs--media-left .fnl-fs__copy, .fnl-fs--media-right .fnl-fs__copy { grid-column: 1; grid-row: 1; }
	.fnl-fs__media, .fnl-fs--media-left .fnl-fs__media, .fnl-fs--media-right .fnl-fs__media { grid-column: 1; grid-row: 2; width: 100%; }
	.h2--col { font-size: 34px; max-width: 100%; }
	.sub--col, .biz-fs__points { max-width: 100%; }
}
@media (max-width: 767px) {
	.h2--col { font-size: 32px; }
	.shot-stage__layer { border-radius: 8px; }
	.shot-stage__chip { left: 10px; bottom: 10px; padding: 6px 10px; font-size: 11px; }
}

/* --- icon steps: four ringed cards with valiant.app line icons --- */
.icon-steps { position: relative; overflow: hidden; }
.icon-steps__dots { position: absolute; right: -10%; top: 0; width: 60%; height: 100%; opacity: .5; pointer-events: none; }
.icon-steps__dots canvas { width: 100%; height: 100%; display: block; }
.icon-steps .container { position: relative; z-index: 1; }
.icon-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.icon-steps__item { position: relative; padding: 30px 26px 32px; border-radius: var(--fnl-r-card); background: var(--fnl-card-bg); box-shadow: var(--fnl-inner-light); }
.icon-steps__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.icon-steps__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background-size: cover; background-position: center; }
.icon-steps__icon img { width: 28px; height: 28px; }
.icon-steps__num { position: absolute; top: 28px; right: 26px; color: rgba(0, 255, 138, .5); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.icon-steps__title { margin: 22px 0 10px; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.icon-steps__item p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 1200px) { .icon-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .icon-steps__list { grid-template-columns: 1fr; } .icon-steps__item { padding: 24px 22px; } }

/* --- technology: module cards with their own screens --- */
.tech-mods__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.tech-mod { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--fnl-r-card); background: var(--fnl-card-bg); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--fnl-inner-light); }
.tech-mod::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tech-mod__shot { position: relative; display: block; height: 210px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(0, 255, 138, .10), rgba(0, 255, 138, 0) 60%), var(--fnl-stage); }
.tech-mod__shot img { position: absolute; left: 22px; top: 22px; width: 150%; max-width: none; height: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); transition: transform .6s var(--ease-out); }
.tech-mod:hover .tech-mod__shot img { transform: translate(-6px, -6px); }
.tech-mod__body { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 22px 24px 26px; }
.tech-mod__icon { grid-row: span 2; margin-top: 2px; }
.tech-mod__name { color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
.tech-mod__text { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.tech-mods__note { margin: 32px 0 0; max-width: 760px; color: var(--ink-dim); font-size: 14px; line-height: 1.6; }
.tech-mods__note a { display: inline-flex; align-items: center; color: var(--ink-sub); }
@media (max-width: 991px) { .tech-mods__list { grid-template-columns: 1fr; } .tech-mod__shot { height: 180px; } }

/* --- technology heroes: the check chip sits 30px under the buttons (Ben's point 11) --- */
.outer__hero .tech-hero__chip { display: flex; margin-top: 30px; width: fit-content; position: relative; z-index: 2; }
/* Centred heroes (Strategy, Analytics) centre the chip under their buttons. */
.hero__middle .outer__hero .tech-hero__chip, .hero__analytics .outer__hero .tech-hero__chip { align-self: center; margin-left: auto; margin-right: auto; }
/* Technology heroes share the site's heading weight (Ben's point 44: valiant.app's
   .hero__brain sets 500). */
.hero__brain .outer__hero h1.h1, .hero__bottom .outer__hero h1.h1, .hero__middle .outer__hero h1.h1, .hero__analytics .outer__hero h1.h1 { font-weight: 800; }
/* Keep the header readable over the Analytics glow (Ben's point 17). */
.hero__analytics::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 170px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(9, 24, 17, .72) 0%, rgba(9, 24, 17, 0) 100%); }
.outer__hero .tech-hero__chip .tech-hero__chip-text { margin: 0; color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.3; letter-spacing: -0.03em; }

/* ==========================================================================
   Section art (tools/biz/pages/art.mjs): real screens and real work in
   ringed stages. Ben's points 10, 35, 37, 38, 41.
   ========================================================================== */
.art--fill { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.art--fill::after { content: none; }
.art-phone { position: absolute; z-index: 3; display: block; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: 3px solid #0d1f17; background: #050E0A; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -18px rgba(0, 0, 0, .85); transition: transform .6s var(--ease-out); }
.art-phone__poster, .art-phone__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-phone__film { opacity: 0; transition: opacity .6s ease; }
.art-phone__film.is-playing { opacity: 1; }
.art-card, .art-mail { position: absolute; z-index: 2; display: block; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: #050E0A; box-shadow: 0 26px 52px -18px rgba(0, 0, 0, .85); transition: transform .6s var(--ease-out); }
.art-card { aspect-ratio: 4 / 5; }
.art-mail { aspect-ratio: 3 / 4.4; }
.art-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.art-browser { position: absolute; z-index: 2; display: block; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0A1410; box-shadow: 0 26px 52px -18px rgba(0, 0, 0, .85); }
.art-browser--secondary { z-index: 1; opacity: .85; }
.art-browser__bar { display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 10px; background: #0d1f17; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.art-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.art-browser__page { display: block; width: 100%; height: auto; }
.art-journey { position: absolute; left: 6%; right: 6%; top: 14.5%; height: 2px; background: linear-gradient(90deg, rgba(0, 255, 138, .1), rgba(0, 255, 138, .6), rgba(0, 255, 138, .1)); z-index: 1; }
.art-journey i { position: absolute; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #00FF8A; box-shadow: 0 0 14px rgba(0, 255, 138, .6); }
.art-step { position: absolute; z-index: 3; width: 28%; text-align: center; color: var(--ink-sub); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.art-pin { position: absolute; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #00FF8A; color: #04140c; font-size: 14px; font-weight: 700; box-shadow: 0 0 0 6px rgba(0, 255, 138, .18), 0 10px 24px -6px rgba(0, 0, 0, .7); }
.svc:hover .art-phone { transform: translateY(-6px); }
.svc .art--creative .art-phone:nth-of-type(1) { transition: transform .6s var(--ease-out); }
@media (max-width: 767px) { .art-phone { border-width: 2px; border-radius: 12px; } .art-step { font-size: 10px; } .art-pin { width: 24px; height: 24px; font-size: 12px; } }

/* --- process steps: the art replaces the Webflow stock photos --- */
.steps__media { margin: 0; }
.steps__media .art, .timeline__photo .art { width: 100%; }
.timeline__photo { border: 0 !important; box-shadow: none !important; overflow: visible !important; aspect-ratio: auto !important; }

/* --- services: everything you get, with its picture --- */
.get__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.get__art { position: sticky; top: 110px; }
.get__rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.get__rows li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.get__rows .get__num { margin: 3px 0 0; }
.get__title { margin: 0 0 8px; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; }
.get__rows .body { margin: 0; }
@media (max-width: 991px) { .get__grid { grid-template-columns: 1fr; gap: 40px; } .get__art { position: static; max-width: 520px; } }

/* --- dot-field backgrounds for text-led sections (valiant.app initAsciiBg) --- */
.stats, .market, .links, .proof, .page-hero { position: relative; overflow: hidden; }
.bg-field { position: absolute; top: 0; width: 50%; height: 100%; opacity: .18; pointer-events: none; z-index: 0; }
.bg-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-field--right { right: 0; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 75% 50%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 75% 50%, #000 25%, transparent 80%); }
.bg-field--left { left: 0; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 25% 50%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 25% 50%, #000 25%, transparent 80%); }
.bg-field--hero { left: 0; width: 100%; opacity: .16; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 50% 30%, #000 20%, transparent 75%); }
.stats > .container, .market > .container, .links > .container, .proof > .container, .page-hero > .container { position: relative; z-index: 1; }

/* --- home About: the portal beside the manifesto heading --- */
.manifesto__aside { margin-top: 36px; }
@media (max-width: 991px) { .manifesto__aside { max-width: 560px; } }

/* --- expertise cards: each market's lead work, faded behind the copy --- */
.xcard { overflow: hidden; isolation: isolate; }
/* A photo of the market fills the card's right side and fades into it (Ben's point 36). */
.xcard__bg { position: absolute; right: 0; top: 0; z-index: -1; width: 58%; height: 100%; object-fit: cover; opacity: .34; -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent 95%); mask-image: linear-gradient(270deg, #000 25%, transparent 95%); transition: opacity .5s ease, transform .6s var(--ease-out); }
.xcard:hover .xcard__bg { opacity: .48; transform: scale(1.03); }
.xcard__line { max-width: 76%; }

/* --- link cards: thumbnails (specialties) and icons (services) --- */
.link-card--img, .link-card--icon { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: center; }
.link-card--img > .link-card__name, .link-card--icon > .link-card__name { grid-column: 2; }
.link-card--img > .link-card__text, .link-card--icon > .link-card__text { grid-column: 2; }
.link-card__thumb { grid-row: span 2; display: block; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); }
.link-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease-out); }
.link-card:hover .link-card__thumb img { transform: scale(1.06); }
.link-card__icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; background-size: cover; background-position: center; }

/* Ben's point 6: ".market__pains p { margin: 0 }" outranked the title's own
   margin, so the first pain sat flush under "Where growth stalls". */
.market__pains .market__pains-title { margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }
@media (max-width: 767px) { .market__pains .market__pains-title { margin-bottom: 20px; padding-bottom: 18px; } }

/* ==========================================================================
   Case studies (Ben's points 7, 8). valiant.app's case heroes sit on dark
   artwork; ours carry each client's Webflow image, often light (T3) or loud
   (Whop), so the blurred copy is darkened and the band fades into the page.
   The feed restores valiant.app's 30px under every .h2-title and sets the
   long write-ups for reading: 16px text, real subheadings, steady rhythm.
   ========================================================================== */
.case__hero:before { filter: blur(20px) brightness(.42) saturate(.7); }
.case__hero:after { background: linear-gradient(180deg, rgba(2, 9, 5, .55) 0%, rgba(2, 9, 5, .35) 45%, rgba(9, 24, 17, .96) 100%); }
.case__hero .outer__case .desc>p { color: rgba(255, 255, 255, .72); }
.case__hero { padding-bottom: 90px; }
.case__feed .inner__content .h2-title { margin: 0 0 30px; }
.case__feed .inner__content > div + div { margin-top: 0; }
.case__feed .inner__content .text>p { margin-bottom: 22px; font-size: 16px; line-height: 1.68; letter-spacing: -0.015em; color: #9DC3B0; max-width: 68ch; }
.case__feed .inner__content .text>h3 { margin: 56px 0 18px; color: #fff; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.case__feed .inner__content .text>h3:first-child { margin-top: 0; }
.case__feed .inner__content .text>h4.cs-sub { margin: 40px 0 14px; padding-left: 14px; border-left: 2px solid var(--green); color: #fff; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.case__feed .inner__content .text>h3 + h4.cs-sub { margin-top: 8px; }
.case__feed .inner__content .text>.sol-img { margin: 34px 0 40px; }
.case__feed .inner__content .text .list { margin-top: 44px; }
@media (max-width: 767px) {
	.case__feed .inner__content .text>p { font-size: 15px; }
	.case__feed .inner__content .text>h3 { margin-top: 44px; font-size: 24px; }
	.case__feed .inner__content .text>h4.cs-sub { margin-top: 32px; font-size: 17px; }
}

/* ==========================================================================
   /reviews (Ben's points 19-22). valiant.app stacks the two header reviews
   with Slick; our absolute stack lost to a later position:relative and the
   cards spilled out of the glass frame. Both slides now share one grid cell,
   so the frame always wraps the tallest review. Wall photos are clipped to
   their circles.
   ========================================================================== */
.single__review--wrapper .single__review--slider { display: grid; height: auto !important; }
.single__review--wrapper .single__review--slider .slide { grid-area: 1 / 1; position: relative !important; top: auto !important; left: auto !important; right: auto !important; }
.single__review--wrapper .single__review--slider .slide>.inn .author>img { width: 60px; height: 60px; min-height: 60px; max-height: 60px; object-fit: cover; border-radius: 50%; }
.quote__wall .elem .author>.media { overflow: hidden; }
.quote__wall .elem .author>.media>img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ==========================================================================
   Work With Us (Ben's points 28, 39, 40): no pill, the headline moves up with
   more room around it, and the form is translucent so the butterfly film
   shows through.
   ========================================================================== */
.wwu-hero { padding-top: 140px; }
.wwu-hero__text { gap: 0; padding-top: 8px; }
.wwu-hero__text .h1 { margin: 0 0 30px; }
.wwu-hero__text .lede { margin: 0 0 36px; max-width: 30em; }
.wwu-hero__text .wwu-proof { margin-bottom: 34px; }
.wwu-hero__media img, .wwu-hero__media video.is-playing { opacity: .85; }
.wwu-hero__media span { background: linear-gradient(90deg, rgba(9, 24, 17, .94) 0%, rgba(9, 24, 17, .55) 42%, rgba(9, 24, 17, .12) 100%), linear-gradient(180deg, rgba(9, 24, 17, 0) 70%, var(--bg) 100%); }
.wwu-form { background: linear-gradient(180deg, rgba(10, 24, 18, .52), rgba(5, 14, 10, .62)); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); border-color: rgba(255, 255, 255, .14); }
.wwu-form input, .wwu-form select, .wwu-form textarea { background-color: rgba(2, 9, 5, .62); }
@media (max-width: 991px) { .wwu-hero { padding-top: 120px; } .wwu-form { background: linear-gradient(180deg, rgba(10, 24, 18, .7), rgba(5, 14, 10, .8)); } }

/* --- Calendly modal: valiant.app style.css 13713-13780, verbatim (Ben's point 29) --- */
.calendly-modal{ position: fixed; inset: 0; z-index: 1200; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.calendly-modal.open{ opacity: 1; visibility: visible; }
.calendly-modal .calendly-modal__box{ transform: translateY(16px) scale(.985); transition: transform .38s cubic-bezier(.22,.61,.36,1); }
.calendly-modal.open .calendly-modal__box{ transform: translateY(0) scale(1); }
.calendly-modal__backdrop{ position: absolute; inset: 0; background: rgba(2, 9, 5, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.calendly-modal__box{ position: relative; z-index: 2; width: 90%; margin-top: 10vh; margin-left: auto; margin-right: auto; background-color: #1A2A22; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 18px; height: 80vh; overflow: auto; }
.calendly-modal__close{ position: absolute; top: 8px; right: 12px; z-index: 3; background: none; border: 0; color: #83B59F; font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.calendly-modal__close:hover{ color: #fff; }
.calendly-modal__close:focus-visible{ outline: 2px solid #00FF8A; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 991px){ .calendly-modal__box{ margin-top: 5vh; height: 90vh; width: 95%; } }
html.cal-locked, html.cal-locked body { overflow: hidden; }

/* ==========================================================================
   /results (Ben's point 16): odometer hero, KPI tiles and chart cards.
   ========================================================================== */
.results-hero { position: relative; padding: 190px 0 110px; overflow: hidden; isolation: isolate; text-align: center; }
.results-hero__glow { position: absolute; left: 50%; top: -260px; z-index: -1; width: 1100px; height: 720px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 255, 138, .16), rgba(0, 255, 138, 0) 70%); pointer-events: none; }
.results-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.results-hero__inner .pill { margin-bottom: 22px; }
.results-hero__inner .h1 { margin: 0 0 26px; }
.results-hero__inner .lede { margin: 0 auto; max-width: 620px; }
.results-hero__counter { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 56px; }
.results-hero__num { margin: 0; font-size: 96px !important; line-height: 1 !important; color: #fff; }
.results-hero__counter > span { color: var(--ink-sub); font-size: 16px; letter-spacing: -0.02em; }
.results-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 1100px; margin: 56px auto 0; padding: 0; list-style: none; }
.results-kpis li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px 28px; border-radius: var(--fnl-r-card); background: var(--fnl-card-bg); box-shadow: var(--fnl-inner-light); }
.results-kpis li::after, .chart::after, .results-quote__card::after, .results-costs li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.results-kpis b { color: var(--green); font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.results-kpis li > span { color: var(--ink-muted); font-size: 14px; line-height: 1.4; max-width: 22ch; }
.results-block__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.results-side { display: flex; flex-direction: column; gap: 18px; }
.results-side__art .art { width: 100%; }
.results-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.results-costs li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border-radius: 14px; background: var(--fnl-card-bg); }
.results-costs b { color: #fff; font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.results-costs span { color: var(--ink-muted); font-size: 13px; line-height: 1.35; }
.results-costs a { margin-top: auto; color: var(--green); font-size: 13px; text-decoration: none; }
.results-costs a:hover { text-decoration: underline; }
.results-costs__client { margin-top: auto; color: var(--ink-dim); font-size: 13px; }

/* chart card */
.chart { position: relative; display: flex; flex-direction: column; margin: 0; padding: 28px 28px 22px; border-radius: var(--fnl-r-card); background: var(--fnl-card-bg); box-shadow: var(--fnl-inner-light); }
.chart__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.chart__title { color: #fff; font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
.chart__sub { color: var(--ink-dim); font-size: 13px; letter-spacing: -0.01em; }
.chart__src { margin: auto 0 0; padding-top: 20px; color: var(--ink-dim); font-size: 12px; line-height: 1.5; }
.chart__src a { color: var(--ink-sub); }
.chart__legend { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--ink-muted); font-size: 13px; }
.chart__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 12px; }
.chart__key:first-child { margin-left: 0; }
.chart__key--before { background: rgba(255, 255, 255, .22); }
.chart__key--after { background: #00FF8A; }

/* horizontal bars */
.hbars { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hbars__row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 76px; align-items: center; gap: 14px; }
.hbars__label { display: flex; flex-direction: column; color: var(--ink); font-size: 14px; line-height: 1.25; }
.hbars__label small { color: var(--ink-dim); font-size: 12px; }
.hbars__track { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.hbars__bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(0, 255, 138, .45), #00FF8A); transform-origin: left center; }
.hbars__val { color: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 700; text-align: right; letter-spacing: -0.02em; }

/* before and after */
.ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; min-height: 250px; }
.ba__group { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ba__cols { display: flex; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; height: 210px; }
.ba__bar { position: relative; flex: 0 0 40%; max-width: 54px; height: calc(var(--v) * 100%); border-radius: 10px 10px 4px 4px; transform-origin: center bottom; }
.ba__bar--before { background: rgba(255, 255, 255, .16); }
.ba__bar--after { background: linear-gradient(180deg, #00FF8A, rgba(0, 255, 138, .5)); box-shadow: 0 0 30px -6px rgba(0, 255, 138, .45); }
.ba__bar b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ba__bar--before b { color: var(--ink-muted); }
.ba__label { display: flex; flex-direction: column; align-items: center; color: var(--ink); font-size: 14px; text-align: center; }
.ba__label small { color: var(--ink-dim); font-size: 12px; }

/* line */
.line { display: block; width: 100%; height: auto; overflow: visible; }
.line__grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.line__axis { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.line__path { fill: none; stroke: #00FF8A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px rgba(0, 255, 138, .45)); }
.line__pt circle { fill: #091811; stroke: #00FF8A; stroke-width: 3; }
.line__pt text { fill: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.line__pt text.line__x { fill: var(--ink-dim); font-family: var(--font-body, Inter, sans-serif); font-size: 12px; font-weight: 400; }

/* spend vs cost per install */
.svc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.svc2__metric { display: flex; flex-direction: column; gap: 14px; }
.svc2__name { color: var(--ink-sub); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.svc2__bars { display: flex; align-items: flex-end; gap: 14px; height: 200px; margin-top: 30px; }
.svc2__bar { position: relative; flex: 1; height: calc(var(--v) * 100%); min-height: 12px; border-radius: 10px 10px 4px 4px; background: rgba(255, 255, 255, .16); transform-origin: center bottom; }
.svc2__bar--hi { background: linear-gradient(180deg, #00FF8A, rgba(0, 255, 138, .45)); }
.svc2__bar b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 700; white-space: nowrap; }
.svc2__bar i { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); color: var(--ink-dim); font-size: 12px; font-style: normal; white-space: nowrap; }
.svc2__delta { margin-top: 26px; color: var(--green); font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

/* chart motion: bars grow and lines draw when the card scrolls into view */
@media (prefers-reduced-motion: no-preference) {
	.chart[data-chart]:not(.is-in) .hbars__bar { transform: scaleX(0); }
	.chart[data-chart]:not(.is-in) .ba__bar, .chart[data-chart]:not(.is-in) .svc2__bar { transform: scaleY(0); }
	.chart[data-chart]:not(.is-in) .line__path { stroke-dashoffset: 1; }
	.chart[data-chart]:not(.is-in) .line__area, .chart[data-chart]:not(.is-in) .line__pt { opacity: 0; }
	.hbars__bar { transition: transform 1.1s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 90ms); }
	.hbars__row { --i: 0; }
	.ba__bar, .svc2__bar { transition: transform 1s cubic-bezier(.22,.61,.36,1); }
	.ba__group:nth-child(2) .ba__bar { transition-delay: .12s; } .ba__group:nth-child(3) .ba__bar { transition-delay: .24s; }
	.line__path { transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1); }
	.line__area { transition: opacity 1s ease .8s; }
	.line__pt { transition: opacity .5s ease calc(.5s + var(--i) * .25s); }
}

/* review with figures (the Webflow results pattern) */
.results-quote__card { position: relative; max-width: 980px; margin: 0 auto; padding: 48px 52px; border-radius: var(--fnl-r-card); background: radial-gradient(90% 120% at 100% 0%, rgba(0, 255, 138, .10), rgba(0, 255, 138, 0) 55%), var(--fnl-card-bg); box-shadow: var(--fnl-inner-light); }
.results-quote__who { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.results-quote__who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0, 255, 138, .4); }
.results-quote__who p { margin: 0; color: #fff; font-size: 17px; font-weight: 600; }
.results-quote__who span { color: var(--ink-dim); font-size: 14px; }
.results-quote__card blockquote { margin: 0; }
.results-quote__card blockquote p { margin: 0; color: #fff; font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.22; letter-spacing: -0.025em; }
.results-quote__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 34px 0 24px; padding: 0; list-style: none; }
.results-quote__chips li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; border: 1px solid rgba(0, 255, 138, .22); background: rgba(0, 255, 138, .06); }
.results-quote__chips b { color: var(--green); font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.results-quote__chips li > span { color: var(--ink-muted); font-size: 13px; line-height: 1.4; }

@media (max-width: 1200px) { .results-hero__num { font-size: 76px !important; } .hbars__row { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 70px; } }
@media (max-width: 991px) {
	.results-block__grid { grid-template-columns: 1fr; }
	.results-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.results-quote__card { padding: 34px 28px; }
	.results-quote__card blockquote p { font-size: 24px; }
}
@media (max-width: 767px) {
	.results-hero { padding: 130px 0 72px; }
	.results-hero__num { font-size: 52px !important; }
	.results-kpis b { font-size: 32px; }
	.chart { padding: 22px 18px 18px; }
	.hbars__row { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 6px; }
	.hbars__label { grid-column: 1 / -1; }
	.ba__cols { height: 170px; }
	.svc2 { gap: 16px; }
	.svc2__bars { height: 160px; }
	.results-costs, .results-quote__chips { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABOUT PAGE: valiant.app style.css (.about__hero, .our__story, .our__values,
   .our__team--slider, .voyage__wrapper and their media queries), verbatim
   via extract_css.py. Ben's points 25, 26.
   ========================================================================== */
.our__story .outer__story .desc .txt>p {
	margin-top: 0px;
	margin-bottom: 25px;
	font-size: 24px;
	line-height: 160%;
	letter-spacing: -0.03em;
}
.our__story .outer__story .desc .txt>p:last-child {
	margin-bottom: 0px;
}
.our__story .outer__story .desc .txt {
	 background: linear-gradient(to bottom, #5E8272, rgba(94,130,114,.4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.our__story .outer__story .desc .txt .hl-word {
	transition: color .45s ease, -webkit-text-fill-color .45s ease;
}
.our__story .outer__story .desc .txt .hl-word.lit {
	color:#83B59F;
	-webkit-text-fill-color:#83B59F;
}
.our__team--slider {
	position: relative;
}
.our__team--slider>img {
	position: absolute;
	bottom:0px;
	width: 100%;
	object-fit: cover;
	object-position: bottom right;
	right:0px;
}
.about__hero>img {
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter:blur(8px);
}
.about__hero:before {
	content:"";
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,.3);
	z-index: 3;
}
.about__hero .outer__about>p {
	margin:0px;
	font-size: 16px;
	line-height: 130%;
	letter-spacing: -0.03em;
	color:#83B59F;
}
.about__hero .outer__about {
	position: relative;
	z-index: 3;
}
.about__hero {
	border-bottom:1px solid rgba(255,255,255,.07);
	position: relative;
	z-index: 2;
}
.about__hero .outer__about {
	min-height: 855px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.our__story .desc>p {
	margin:0px;
	margin-bottom: 35px;
	font-size: 24px;
	line-height: 160%;
	letter-spacing: -0.03em;
	color:#5E8272;
}
.our__story .desc>p:last-child {
	margin-bottom: 0px;
}
.our__story .desc .icon-float.icon-1 {
	min-width: 110px;
	max-width: 110px;
	min-height: 110px;
	max-height: 110px;
	left:0px;
	bottom:-130px;
}
.our__story {
	border-bottom:1px solid rgba(255,255,255,.07);
}
.our__story .desc .icon-float.icon-2, .our__story .desc .icon-float.icon-3 {
	min-width: 90px;
	max-width: 90px;
	min-height: 90px;
	max-height: 90px;
}
.our__story .desc .icon-float.icon-2 {
	right:-180px;
	bottom:200px;
}
.our__story .desc .icon-float.icon-3 {
	left:-220px;
	top:200px;
}
.our__story .desc .icon-float {
	display: inline-flex;
	align-items: center;
	border-radius: 250px;
	justify-content: center;
	position: absolute;
	background:linear-gradient(to top right , rgba(255,255,255,0) , rgba(255,255,255,.07));
	backdrop-filter:blur(50px);

	animation: story-float 7s ease-in-out infinite;
	will-change: transform, translate;
}
.our__story .desc .icon-float.icon-1 {
	animation-duration: 7.5s;
}
.our__story .desc .icon-float.icon-2 {
	animation-duration: 9s;
	animation-direction: alternate-reverse;
}
.our__story .desc .icon-float.icon-3 {
	animation-duration: 8s;
	animation-delay: -2.5s;
}
.our__story .desc .icon-float:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.our__story .desc {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.our__story .desc>.h2-title {
	margin-bottom: 60px;
}
.our__story .outer__story>.mission .inn>p {
	margin:0px;
	margin-top: 70px;

	font-size: 32px;
	line-height: 110%;
	font-weight: 500;
	letter-spacing: -0.03em;
	color:#000000;
}
.our__story .outer__story>.mission .inn>span {
	display: block;
	font-weight: 500;
	font-size: 12px;
	line-height: 90%;
	font-weight: 500;
	color:rgba(0,0,0,.5);
	text-transform: uppercase;
}
.our__story .outer__story>.mission .inn {
	width: 100%;
	min-height: 310px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color:#00FF8A;
	border-radius: 12px;
	padding:30px;
}
.our__story .outer__story>.mission {
	width: 100%;
	max-width: 460px;
	padding:20px;
	border-radius: 18px;
	border:1px solid rgba(255,255,255,.07);
}
.our__story .outer__story {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.our__story {
	position: relative;
	z-index: 2;
	padding-top: 100px;
	padding-bottom:250px;
	overflow-x: clip;
}
.our__story.story-pin {
	min-height: 260vh;
	padding-top: 0;
	padding-bottom: 0;
}
.our__story.story-pin>.container {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.our__story .desc .story-logo-pin {
	position: absolute;
	right: -150px;
	bottom: 40px;
	min-width: 120px; max-width: 120px;
	min-height: 120px; max-height: 120px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 250px;
	background: linear-gradient(to top right, rgba(0,255,138,.05), rgba(0,255,138,.14));
	backdrop-filter: blur(50px);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
	z-index: 3;
	pointer-events: none;
}
.our__story .desc .story-logo-pin.reached {
	opacity: 1;
	transform: none;
}
.about__hero .outer__about .h2-title {
	text-transform: initial;
}
.voyage__wrapper .outer__voyage>.desc>.h2-title {
	text-transform: initial;
}
.voyage__wrapper .outer__voyage>.desc>p {
	font-size: 18px;
	font-weight: 600;
}
@media (max-width: 1200px) {
	.our__story .outer__story .desc .txt>p {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.our__story .desc>.h2-title {
		margin-bottom: 40px;
	}
	.our__story .desc .icon-float.icon-2, .our__story .desc .icon-float.icon-3 {
		min-width: 64px; max-width: 64px;
		min-height: 64px; max-height: 64px;
	}
	.our__story .desc .icon-float.icon-2>img, .our__story .desc .icon-float.icon-3>img {
		max-width: 26px; max-height: 26px;
	}
	.our__story .desc .icon-float.icon-2 {
		right: 0;
		bottom: auto;
		top: -110px;
	}
	.our__story .desc .icon-float.icon-3 {
		left: 0;
		top: -110px;
	}
	.our__story .desc .story-logo-pin {
		min-width: 96px; max-width: 96px;
		min-height: 96px; max-height: 96px;
		right: 0;
		bottom: -130px;
	}
	.our__story .desc .story-logo-pin>img {
		width: 42px;
	}
}
@media (max-width: 767px) {
	.our__story .desc .icon-float.icon-2, .our__story .desc .icon-float.icon-3 {
		min-width: 48px; max-width: 48px;
		min-height: 48px; max-height: 48px;
	}
	.our__story .desc .icon-float.icon-2>img, .our__story .desc .icon-float.icon-3>img {
		max-width: 20px; max-height: 20px;
	}
	.our__story .desc .icon-float.icon-2 {
		right: 4px;
		top: -64px;
	}
	.our__story .desc .icon-float.icon-3 {
		left: 4px;
		top: -64px;
	}
	.our__story .desc .story-logo-pin {
		min-width: 64px; max-width: 64px;
		min-height: 64px; max-height: 64px;
		right: 8px;
		bottom: -70px;
	}
	.our__story .desc .story-logo-pin>img {
		width: 28px;
	}
}
.our__story .desc .story-logo-pin>img {
	width: 54px;
	height: auto;
}
.our__story .desc .story-logo-pin:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad-border);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}
.our__values {
	padding:100px 0px;
	position: relative;
	z-index: 2;
	border-bottom:1px solid rgba(255,255,255,.07);
}
.our__values .values__block>.elem>.title>.media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	max-width: 40px;
	min-height: 40px;
	max-height: 40px;
	border-radius: 8px;
	background-repeat: no-repeat!important;
	background-size: cover!important;
	background-position: center!important;
	margin-right: 30px;
}
.our__values .values__block>.elem {
	border-bottom:1px solid rgba(255,255,255,.07);
}
.our__values .values__block>.elem:last-child {
	border-bottom: 0px;
}
.our__values .values__block>.elem .desc>p {
	margin:0px;
	font-size: 14px;
	line-height: 130%;
	letter-spacing: -0.03em;
	color:#5E8272;
	font-weight: 400;
}
.our__values .values__block>.elem>.title>p {
	margin:0px;
	font-size: 18px;
	line-height: 110%;
	text-transform: capitalize;
	font-weight: 500;
	color:#83B59F;
}
.our__values .values__block>.elem>.title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 300px;
	max-width: 300px;
	margin-right: 40px;
}
.our__values .values__block>.elem {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding:30px;
}
.our__values .values__block {
	width: 100%;
	border-radius: 18px;
	border:1px solid rgba(255,255,255,.07);
	max-width: 900px;
}
.voyage__wrapper .outer__voyage>.media>img {
	border-radius: 18px;
	width: 100%;
	object-fit: cover;
}
.voyage__wrapper .outer__voyage>.desc {
	max-width: 700px;
}
.voyage__wrapper {
	background:url('../img/app/voyage-back.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	position: relative;
}
.voyage__wrapper .ascii-dots {
	position: absolute;
	left:0;
	top:0px;
	pointer-events: none;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}
.voyage__wrapper .outer__voyage {
	position: relative;
	z-index: 2;
}
.voyage__wrapper .outer__voyage>.desc>h2 {
	margin-bottom: 60px;
}
.voyage__wrapper .outer__voyage>.desc>p {
	margin-top: 0px;
	margin-bottom: 25px;
	font-size: 14px;
	line-height: 160%;
	letter-spacing: -0.03em;
	color:#5E8272;
}
.voyage__wrapper .outer__voyage>.desc>p:last-child {
	margin-bottom: 0px;
}
.voyage__wrapper .outer__voyage>.media>p {
	margin:0px;
	font-size: 12px;
	line-height: 110%;
	position: absolute;
	left:25px;
	bottom:25px;
	color:#FFFFFF;
}
.voyage__wrapper .outer__voyage>.media {
	display: inline-flex;
	align-items: center;
	position: relative;
	justify-content: center;
	max-width: 450px;
	min-width: 450px;
	margin-left: 36px;
	width: 100%;
}
.voyage__wrapper .outer__voyage {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.voyage__wrapper>.dots {
	position: absolute;
	left:0px;
	bottom:0px;
	width: min(1410px, 100%);
	aspect-ratio: 1410 / 633;
	opacity:.1;
	pointer-events: none;
}
.voyage__wrapper {
	position: relative;
	z-index: 2;
	padding-top: 100px;
	overflow: hidden;
	padding-bottom: 165px;
	border-bottom:1px solid rgba(255,255,255,.07);
}
.our__team--slider .slick-slide {
    margin: 0 10px;
}
.our__team--slider .slide>.elem:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-even
}
.our__team--slider .slide>.elem .media>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.our__team--slider .slide>.elem .media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  height: 100%;
}
.our__team--slider .slide>.elem .bottom__info>ul li a:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.our__team--slider .slide>.elem .bottom__info>ul li a:hover {
	background-color: rgba(255,255,255,.07);
}
.our__team--slider .slide>.elem .bottom__info>ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  border-radius: 250px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 12px;
  line-height: 90%;
  letter-spacing: -0.03em;
  color: #83B59F;
  text-decoration: none;
  transition: .3s ease all;
  position: relative;
  border-color: transparent;
}
.our__team--slider .slide>.elem .bottom__info>ul {
  padding: 0px;
  list-style-type: none;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.our__team--slider .slide>.elem .bottom__info>p {
  margin-top: 0px;
  margin-bottom: 15px;
  font-size: 12px;
  line-height: 110%;
  letter-spacing: -0.03em;
  color: #83B59F;
}
.our__team--slider .slide>.elem .bottom__info {
  position: absolute;
  left: 25px;
  width: calc(100% - 50px);
  bottom: 25px;
  z-index: 2;
}
.our__team--slider .slide>.elem>p {
	position: absolute;
  z-index: 2;
  top: 25px;
  left: 25px;
  margin: 0px;
  font-size: 16px;
  line-height: 110%;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #83B59F;
}
.our__team--slider .slide>.elem {
	width: 280px;
	height: 350px;
	position: relative;
	border:1px solid transparent;
  backdrop-filter:blur(20px);
  background:linear-gradient(to top right , rgba(255,255,255,0) , rgba(255,255,255,.06));
  overflow: hidden;
  border-radius: 18px;
}
.our__team--slider .slide>.elem:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,14,10,.55) 0%, rgba(5,14,10,0) 26%, rgba(5,14,10,0) 55%, rgba(5,14,10,.85) 100%);
}
.our__team--slider {
	padding:100px 0px;
	background-color: #091811;
	position: relative;
	z-index: 2;
	boder-bottom:1px solid rgba(255,255,255,.07);
}
.our__team--slider {
	border-bottom:1px solid rgba(255,255,255,.07);
	position: relative;
}
.our__team--slider .dots-frame {
	position: absolute;
	right:0px;
	top:0px;
	width: min(640px, 60%);
	aspect-ratio: 1152 / 744;
	overflow: hidden;
	z-index: 1;
	opacity:.1;
}
.our__team--slider .ascii-dots {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.our__team--slider .outer__team--slider {
	position: relative;
	z-index: 2;
}
.our__team--slider .ascii-dots {
	pointer-events: none;
}
.our__values .outer__values .right-values>.inn>.desc>p {
	margin:0px;
	font-size: 32px;
	line-height: 110%;
	font-weight: 500;
	color:#000000;
	letter-spacing: -0.03em;
}
.our__values .outer__values .right-values>.inn>span {
	display: block;
	text-transform: uppercase;
	color:rgba(0,0,0,.5);
	font-size: 12px;
	line-height: 90%;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	font-weight: 500;
}
.our__values .outer__values .right-values>.inn {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding:30px;
	border-radius: 12px;
	background-color: #00FF8A;
}
.our__values .outer__values .right-values {
	width: 100%;
	padding: 20px;
	display: flex;
	border-radius: 18px;
	border:1px solid rgba(255,255,255,.07);
	max-width: 460px;
	background:linear-gradient(to top right, rgba(255,255,255,0) , rgba(255,255,255,.07));
}
.our__values .outer__values {
	display: flex;
	justify-content: space-between;
	gap:100px;
}
.our__values>img {
	position: absolute;
	top:0px;
	right:0px;
	width: 100%;
	height: 100%;
	opacity:1;
	pointer-events: none;
	object-fit: contain;
	object-position: right top;
}
.our__values>.values-dots {
	position: absolute;
	top:0px;
	right:0px;
	width: min(1096px, 60%);
	aspect-ratio: 1096 / 815;
	overflow: hidden;
	opacity:.08;
	pointer-events: none;
	z-index: 1;
}
.our__team--slider>.team-dots {
	position: absolute;
	right:0px;
	bottom:0px;
	width: min(1440px, 100%);
	aspect-ratio: 1440 / 747;
	overflow: hidden;
	opacity:.22;
	pointer-events: none;
	z-index: 1;
}
.our__values>.values-dots>canvas, .our__team--slider>.team-dots>canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.our__values {
	position: relative;
}
.our__values .outer__values {
	position: relative;
	z-index: 2;
}
.our__values>.gradient-values {
	position: absolute;
	top:0px;
	right:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top right;
}
.voyage__wrapper>.voyage-dots {
	position: absolute;
	left:0px;
	bottom:0px;
	width: 100%;
	height: 100%;
	opacity:.1;
	object-fit: contain;
	object-position: bottom left;
}
.our__values>svg {
	pointer-events: none;
}
.our__story .pre-title {
	text-align: center;
}
.our__story .h2-title {
	text-align: center;
}
@media (prefers-reduced-motion: reduce) {
	.our__story .desc .icon-float { animation: none;
	}
	.our__values>svg { animation: none; opacity:.85;
	}
}
.our__values>.gradient-values {
	pointer-events: none;
}
.our__team--slider {
	overflow:hidden;
}
.our__team--slider>img.team-dots {
	position: absolute;
	right:0px;
	bottom:0px;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity:.1;
}
.about__hero {
	position: relative;
	border-bottom:1px solid rgba(255,255,255,.07);
}
.about__hero:before {
	content:"";
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,.5);
	backdrop-filter:blur(3px);
}
.about__hero>video {
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.our__team--slider>.team-dots-new {
	opacity:.1;
}
@media (max-width: 1200px) {
	.voyage__wrapper {
		background-position: center center;
	}
	.voyage__wrapper .outer__voyage>.desc {
		max-width: 540px;
	}
	.our__values .values__block>.elem {
		flex-direction: column;
		align-items: flex-start;
	}
	.our__values .values__block>.elem>.title {
		margin-right: 0px;
		margin-bottom: 20px;
		min-width: 0px;
		max-width: 100%;
	}
	.our__values .outer__values {
		gap:30px;
	}
	.our__story .desc {
		max-width: 700px;
	}
	.about__hero .outer__about>p {
		font-size: 14px;
	}
	.about__hero .outer__about {
		min-height: 600px;
	}
	.our__team--slider {
		padding:60px 0px;
	}
	.our__story {
		padding-top: 60px;
		padding-bottom: 150px;
	}
	.our__values {
		padding:60px 0px;
	}
	.our__values .values__block>.elem>.title>p {
		font-size: 16px;
	}
	.our__values .values__block>.elem>.title>.media {
		margin-right: 15px;
	}
	.our__values .values__block>.elem {
		padding:20px;
	}
	.our__values .values__block>.elem>.title {
		min-width: 260px;
		max-width: 260px;
	}
	.voyage__wrapper .outer__voyage>.desc>h2 {
		margin-bottom: 40px;
	}
	.voyage__wrapper {
		padding:60px 0px;
	}
}
@media (max-width: 991px) {
	.our__story .outer__story .desc .txt>p {
		font-size: 20px;
		margin-bottom: 12px;
	}
	.our__story .desc>.h2-title {
		margin-bottom: 25px;
	}
	.voyage__wrapper .outer__voyage>.desc {
		max-width: 440px;
	}
	.our__values .outer__values {
		flex-direction: column;
		gap:32px;
	}
	.our__values .outer__values .right-values {
		max-width: 100%;
	}
	.our__values .outer__values .right-values>.inn {
		padding:20px;
	}
	.our__values .outer__values .right-values {
		padding:12px;
	}
	.our__values .outer__values .right-values>.inn>.desc {
		margin-top: 35px;
	}
	.our__values .outer__values .right-values>.inn>.desc>p {
		font-size: 24px;
	}
	.our__team--slider {
		padding:40px 0px;
	}
	.about__hero .outer__about>p {
		font-size: 12px;
		max-width: 540px;
	}
	.about__hero .outer__about>p br {
		display: none;
	}
	.our__story {
		padding:40px 0px;
	}
	.our__story .outer__story {
		flex-direction: column;
	}
	.our__story .desc>.h2-title {
		margin-bottom: 30px;
	}
	.our__story .desc {
		max-width: 100%;
		margin-right: 0px;
	}
	.our__story .outer__story>.mission {
		max-width: 100%;
		padding:12px;
		margin-top: 110px;
	}
	.our__values {
		padding:40px 0px;
	}
	.voyage__wrapper .outer__voyage>.desc>h2 {
		margin-bottom: 25px;
	}
	.voyage__wrapper .outer__voyage>.desc>p {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.voyage__wrapper {
		padding:40px 0px;
	}
	.voyage__wrapper .outer__voyage>.media {
		min-width: 340px;
		max-width: 340px;
	}
	.voyage__wrapper .outer__voyage>.media>p {
		left:20px;
		bottom:20px;
	}
}
@media (max-width: 767px) {
	.our__story .desc .txt>p {
		font-size: 12px;
		line-height: 130%;
		margin-bottom: 16px;
	}
	.our__story .desc>.h2-title {
		margin-bottom: 24px;
	}
	.our__story.story-pin {
		min-height: 220vh;
	}
	.voyage__wrapper {
		background:none;
		background-color: #0A1812;
	}
	.our__values .outer__values .right-values>.inn>.desc>p br {
		display: none;
	}
	.our__story .outer__story>.mission .inn {
		padding:20px;
		min-height: 210px;
	}
	.our__story .outer__story>.mission .inn>p {
		font-size: 26px;
		margin-top: 45px;
	}
	.our__values .values__block>.elem {
		flex-direction: column;
		align-items: flex-start;
	}
	.our__values .values__block>.elem {
		padding:20px;
	}
	.our__values .values__block>.elem>.title {
		margin-right: 0px;
		margin-bottom: 15px;
		min-width: 0px;
		max-width: 100%;
	}
	.voyage__wrapper .outer__voyage {
		flex-direction: column;
	}
	.voyage__wrapper .outer__voyage>.desc>p {
		margin-bottom: 15px;
	}
	.voyage__wrapper .outer__voyage>.media {
		margin-left: 0px;
		margin-top: 24px;
		width: 100%;
		max-width: 100%;
		min-width: 0px;
	}
	.voyage__wrapper .outer__voyage>.desc {
		max-width: 100%;
	}
}
@media (max-width: 480px) {
	.our__story .outer__story>.mission {
		margin-top: 92px;
	}
}
.our__story .desc .story-logo-pin {
	min-width: 110px; max-width: 110px;
	min-height: 110px; max-height: 110px;
	right: -170px;
	bottom: 0px;
	background:linear-gradient(to top right , rgba(255,255,255,0) , rgba(255,255,255,.07));
}
@media (max-width: 1200px) {
	.our__story {
		padding-bottom: 180px;
	}
	.our__story .desc .icon-float {
		display: none;
	}
	.our__story .desc .story-logo-pin {
		min-width: 112px; max-width: 112px;
		min-height: 112px; max-height: 112px;
		right: 0;
		bottom: -140px!important;
	}
}
@media (max-width: 767px) {
	.our__story .desc .story-logo-pin {
		min-width: 100px; max-width: 100px;
		min-height: 100px; max-height: 100px;
		right: 8px;
		bottom: -120px!important;
	}
	.our__story .desc .story-logo-pin>img {
		width: 40px;
	}
}
.voyage__wrapper .outer__voyage .desc>p {
	font-weight: 400;
}
.our__story .desc .story-logo-pin {
	right: auto;
	left: 0;
	bottom: -170px;
}
@media (max-width: 1200px) {
	.our__story .desc .story-logo-pin {
		left: 0;
		right: auto;
	}
}

/* about: glue for the agency markup */
.about__hero .outer__about .btns { display: flex; justify-content: center; gap: 15px; margin-top: 40px; }
.about__hero .outer__about .h2-title.bigger { margin: 0 0 30px; }
.our__story .desc .pill { margin: 0 auto 18px; }
.about-figures { padding: 56px 0 90px; }   /* clear space between the divider above and the figure cards (Ben's point 41) */
.about-figures__list { margin-top: 0; }
.our__team--slider .team__inner--slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.our__team--slider .team__inner--slider::-webkit-scrollbar { display: none; }
.our__team--slider .team__inner--slider > .slide { flex: 0 0 auto; width: 300px; scroll-snap-align: start; }
.team-slider__nav { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.team-slider__nav .outline-btn { margin-left: auto; }
.voyage__wrapper .outer__voyage { justify-content: center; }
.voyage__wrapper .outer__voyage > .desc { text-align: center; margin: 0 auto; }
@media (max-width: 767px) { .our__team--slider .team__inner--slider > .slide { width: 240px; } .team-slider__nav .outline-btn { margin-left: 0; } }

/* about: readable story text (valiant.app's fade ran to 40% grey for its
   word-lighting script); the fade now runs from the sub tone to the muted tone. */
.our__story .outer__story .desc .txt { background: linear-gradient(to bottom, #A9CDBB, #83B59F); -webkit-background-clip: text; background-clip: text; }
.our__story .desc>.h2-title, .our__team--slider .h2-title, .voyage__wrapper .h2-title { margin-bottom: 30px; }
.about__hero .outer__about>p { max-width: 640px; font-size: 18px; line-height: 1.45; color: var(--ink-sub); }
.our__story .desc>p.pill { display: flex; width: fit-content; height: 30px; margin: 0 auto 18px; font-size: 12px; line-height: 1; letter-spacing: .10em; color: var(--green); }

/* ==========================================================================
   PROCESS RING: valiant.app style.css (.process__wrapper, .circle__process
   and their media queries), verbatim via extract_css.py. Ben's point 32.
   ========================================================================== */
.circle__process .dots canvas {
	opacity:.4;
}
.process__wrapper {
	position: relative;
	z-index: 2;
	padding-top: 100px;
	padding-bottom: 100px;
	border-bottom:1px solid rgba(255,255,255,.07);
}
.process__wrapper .circle__process>.dot.dot-1 {
	left:50%;
	transform:translateX(-50%);
	top:-7px;
}
.process__wrapper .circle__process>.dot.dot-2 {
	right: 3px;
	top:34%;
}
.process__wrapper .circle__process>.dot.dot-3 {
	right: 18%;
	bottom:9%;
}
.process__wrapper .circle__process>.dot.dot-4 {
	left: 18%;
	bottom:9%;
}
.process__wrapper .circle__process>.dot.dot-5 {
	left: 3px;
	top:34%;
}
.process__wrapper .circle__process>.dot.active:after {
	opacity:1;
}
.process__wrapper .circle__process>.dot>p {
	margin:0px;
	font-size: 18px;
	line-height: 90%;
	color:#83B59F;
	position: absolute;
}
.process__wrapper .circle__process>.dot.dot-1>p {
	left:50%;
	transform:translateX(-50%);
	top:-25px;
}
.process__wrapper .circle__process>.dot.dot-4>p, .process__wrapper .circle__process>.dot.dot-5>p {
	top:50%;
	transform:translateY(-50%);
	right:30px;
}
.process__wrapper .circle__process>.dot.dot-2>p, .process__wrapper .circle__process>.dot.dot-3>p {
	top:50%;
	transform:translateY(-50%);
	left:30px;
}
.process__wrapper .circle__process>.dot:after {
	content:"";
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50% ,-50%);
	min-width: 10px;
	max-width: 10px;
	min-height: 10px;
	max-height: 10px;
	background-color: #00FF8A;
	border-radius: 250px;
	opacity:0;
	transition:.3s ease all;
}
.process__wrapper .circle__process>.dot:before {
	    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom ,rgba(255,255,255,.3) , rgba(255,255,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.process__wrapper .circle__process>.dot {
	position: absolute;
	min-width: 20px;
	max-width: 20px;
	backdrop-filter:blur(50px);
	min-height: 20px;
	max-height: 20px;
	border-radius: 250px;
	background-color:rgba(255,255,255,.1);
}
.process__wrapper .circle__process {
	position: relative;
	max-width: 512px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 90px;
}
.process__wrapper .outer__process {
	position: relative;
	z-index: 2;
}
.process__wrapper>img {
	position: absolute;
	left:0px;
	bottom:0px;
	width: 100%;
}
.process__wrapper .outer__process>p {
	text-align: center;
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
	line-height: 130%;
	margin-bottom: 0px;
	margin-top: 0px;
	color:#83B59F;
	font-weight: 300;
}
.process__wrapper .outer__process>h2 {
	text-align: center;
}
.circle__process>.rocket {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left:50%;
	top:50%;
	transform:translate(-50% ,-50%);
}
.circle__process>.rocket { z-index: 2;
}
.circle__process>.rocket>img {
	display: block;
	will-change: transform;
	animation: rocket-hover 5s ease-in-out infinite;
}
.circle__process>.dots {
	inset: auto;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	transform: none;
	pointer-events: none;
}
.circle__process>.dots>.ascii-dots {
	width: 100%;
	height: 100%;
	display: block;
}
.process__wrapper .circle__process>svg .proc-ring {
	will-change: stroke-dashoffset;
}
.process__wrapper .circle__process>svg {
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.circle__process>.rocket>img { animation: none;
	}
}
.circle__process>.dots {
	position: absolute;
	z-index: 2;
	opacity:.1;
}
.process__wrapper .outer__process>span {
	display: block;
	text-align: center;
}
.process__wrapper {
	overflow: hidden;
}
.circle__process>.dots {
	pointer-events: none;
}
@media (max-width: 1200px) {
	.process__wrapper {
		padding:60px 0px;
	}
}
@media (max-width: 991px) {
	.process__wrapper>img {
		min-width: 1240px;
		left:50%;
		transform:translateX(-50%);
	}
	.process__wrapper .outer__process>p {
		font-size: 12px;
	}
	.process__wrapper {
		position: relative;
		overflow: hidden;
	}
}
@media (max-width: 767px) {
	.circle__process>.rocket>img {
		max-width: 180px;
	}
	.circle__process>.dots>img {
		max-width: 640px;
	}
	.process__wrapper .circle__process {
		margin-top: 50px;
	}
	.circle__process>svg {
		max-width: 340px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	.process__wrapper .circle__process {
		max-width: 340px;
	}
	.process__wrapper .circle__process>.dot p {
		font-size: 12px;
	}
	.process__wrapper .circle__process>.dot.dot-1>p {
		top:-20px;
	}
	.process__wrapper .circle__process>.dot.dot-2 {
		right:-3px;
	}
	.process__wrapper .circle__process>.dot.dot-5 {
		left:-3px;
	}
	.process__wrapper .circle__process>.dot.dot-3 {
		right: 14%;
	}
	.process__wrapper .circle__process>.dot.dot-4 {
		left:14%;
	}
}
@media (max-width: 480px) {
	.circle__process>.rocket>img {
		max-width: 140px;
	}
	.circle__process>.dots>img {
		max-width: 500px;
	}
	.circle__process>svg {
		max-width: 240px;
	}
	.process__wrapper .circle__process {
		max-width: 240px;
	}
	.process__wrapper .circle__process>.dot p {
		font-size: 10px;
	}
	.process__wrapper .circle__process>.dot {
		min-width: 15px;
		max-width: 15px;
		min-height: 15px;
		max-height: 15px;
	}
	.process__wrapper .circle__process>.dot:after {
		min-width: 6.5px;
		max-width: 6.5px;
		min-height: 6.5px;
		max-height: 6.5px;
	}
	.process__wrapper .circle__process>.dot.dot-1>p {
		top:-16px;
	}
	.process__wrapper .circle__process>.dot.dot-2>p, .process__wrapper .circle__process>.dot.dot-3>p {
		left:20px;
	}
	.process__wrapper .circle__process>.dot.dot-4>p, .process__wrapper .circle__process>.dot.dot-5>p {
		right: 20px;
	}
}
@media (max-width: 400px) {
	.process__wrapper .circle__process {
		transform:scale(.85);
	}
}

/* process: glue and the step layout */
.proc-hero { padding-top: 170px !important; }
.proc-hero .outer__process .pill { margin: 0 auto 18px; }
.proc-hero .outer__process .h2-title { margin: 0 0 26px; }
.proc-hero .outer__process > p { max-width: 640px; margin-left: auto; margin-right: auto; font-size: 18px; color: var(--ink-sub); }
.proc-steps__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; }
.proc-steps__nav { position: sticky; top: 120px; }
.proc-steps__nav ol { position: relative; margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 1px solid var(--line-strong); }
.proc-steps__nav a { position: relative; display: flex; gap: 12px; padding: 11px 0; color: var(--ink-dim); font-size: 15px; text-decoration: none; transition: color .25s ease; }
.proc-steps__nav a span { color: var(--ink-dim); font-family: var(--font-display); font-weight: 600; }
.proc-steps__nav a::before { content: ""; position: absolute; left: -19px; top: 8px; bottom: 8px; width: 2px; background: transparent; transition: background-color .25s ease; }
.proc-steps__nav a.is-on, .proc-steps__nav a:hover { color: #fff; }
.proc-steps__nav a.is-on span { color: var(--green); }
.proc-steps__nav a.is-on::before { background: var(--green); }
.proc-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.proc-step:first-child { padding-top: 0; border-top: 0; }
.proc-step__num { margin: 0 0 12px; color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }
.proc-step__title { margin: 0 0 16px; color: #fff; font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.proc-step .body { margin: 0; }
.proc-step__portal { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(0, 255, 138, .2); background: rgba(0, 255, 138, .05); color: var(--ink-sub); font-size: 14px; line-height: 1.5; }
.proc-step__portal img { flex: 0 0 18px; margin-top: 2px; }
.proc-step__portal b { color: #fff; font-weight: 600; }
.proc-step__deliv { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.proc-step__deliv li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); color: var(--ink-muted); font-size: 13px; }
.proc-step__art .art { width: 100%; }
@media (max-width: 1200px) { .proc-steps__grid { grid-template-columns: 210px minmax(0, 1fr); gap: 40px; } .proc-step { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 991px) { .proc-steps__grid { grid-template-columns: 1fr; } .proc-steps__nav { display: none; } }
@media (max-width: 767px) { .proc-hero { padding-top: 120px !important; } .proc-step { padding: 40px 0; } .proc-step__title { font-size: 28px; } }
.proc-hero .outer__process { display: flex; flex-direction: column; align-items: center; text-align: center; }
.proc-hero .outer__process .h2-title { text-align: center; }
.proc-hero .outer__process > p.pill { display: flex; width: fit-content; height: 30px; margin: 0 auto 18px; font-size: 12px; line-height: 1; letter-spacing: .10em; color: var(--green); max-width: none; }