/**
 * Miles Sections — extracted per-section CSS for the lgd-miles-* patterns.
 *
 * Lifted out of each pattern's inline block `css` attribute into one
 * maintainable place. Each section's rules are scoped under its namespace
 * class (.lgd-miles-<name>), added to the pattern's top <section>. Identical
 * output to the previous inline CSS — this is a structure refactor only.
 * Loaded globally (handle lgd2026-miles-sections, after lgd2026-style).
 */

/* Glow tints — derived from the brand pink (ms-accent-1 = #FA00AA = rgb(250,0,170)).
   Defined as one RGB token so a brand-color change propagates to every glow.
   Edit --ms-accent-1-rgb (or the alphas) in one place. */
:root {
	--ms-accent-1-rgb: 250, 0, 170;
	--ms-contrast-rgb: 255, 255, 255;
	/* Secondary accent — electric cyan, paired with the hot-pink brand color
	   (FITFO-aligned: hot pink + cyan, no violet/purple). Used in hero glows,
	   the systems line-art, and the CTA shimmer. */
	--ms-cyan-rgb: 0, 220, 255;      /* #00DCFF — FITFO blue-turquoise */
}


/* ===== lgd-miles-about ===== */
.lgd-miles-about{
background: var(--wp--preset--color--ms-base);
position: relative;
}

.lgd-miles-about .about-inner{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--wp--preset--spacing--ms-60);
  align-items: start;
}

.lgd-miles-about .about-media{
  position: relative;
}

.lgd-miles-about .about-photo{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  opacity: 0.85;
}

.lgd-miles-about .about-badge{
position: absolute;
bottom: var(--wp--preset--spacing--ms-40);
left: var(--wp--preset--spacing--ms-40);
background: var(--wp--preset--color--ms-base);
border: 1px solid var(--wp--preset--color--ms-accent-3);
display: flex;
flex-direction: column;
}

.lgd-miles-about .about-content{
  padding-top: var(--wp--preset--spacing--ms-50);
}

.lgd-miles-about .about-title{
margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-about .about-text{
margin-bottom: var(--wp--preset--spacing--ms-40);
max-width: 520px;
}

.lgd-miles-about .about-text strong{
  color: var(--wp--preset--color--ms-contrast);
  font-weight: 600;
}

@media (max-width: 1024px){
  .lgd-miles-about .about-inner{
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--ms-50);
  }

  .lgd-miles-about .about-media{
    max-width: 500px;
  }
}

.lgd-miles-about .about-photo img {
  width: 100%;
  object-fit: cover;
  display: block;
}

:is(.lgd-miles-about, .lgd-miles-pricing) .btn-secondary .wp-block-button__link {
display: inline-block;
font-family: var(--wp--preset--font-family--big-shoulders-display);
font-weight: 800;
font-size: var(--wp--preset--font-size--ms-small);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--wp--preset--color--ms-accent-1);
background: transparent;
padding: 0;
border: none;
border-bottom: 2px solid var(--wp--preset--color--ms-accent-1);
padding-bottom: var(--wp--preset--spacing--ms-20);
cursor: pointer;
transition: color 0.3s ease, border-color 0.3s ease;
}

:is(.lgd-miles-about, .lgd-miles-pricing) .btn-secondary:hover .wp-block-button__link,
:is(.lgd-miles-about, .lgd-miles-pricing) .btn-secondary .wp-block-button__link:focus-visible {
color: var(--wp--preset--color--ms-contrast);
border-color: var(--wp--preset--color--ms-contrast);
}

/* ===== lgd-miles-foundation ===== */
.lgd-miles-foundation {
	background: var(--wp--preset--color--ms-base);
	position: relative;
}

.lgd-miles-foundation::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 85% 15%, rgba(var(--ms-accent-1-rgb), 0.04) 0%, transparent 55%);
	pointer-events: none;
}

.lgd-miles-foundation .foundation-inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-foundation .foundation-header {
	max-width: 820px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-foundation .foundation-title,
.lgd-miles-foundation .foundation-lede {
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-foundation .foundation-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-foundation .foundation-card {
	background: var(--wp--preset--color--ms-base);
	min-height: 420px;
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
	transition: background 0.4s ease;
}

.lgd-miles-foundation .foundation-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 42%), radial-gradient(ellipse at 20% 15%, rgba(var(--ms-accent-1-rgb), 0.08) 0%, transparent 45%);
	opacity: 0.7;
	pointer-events: none;
}

.lgd-miles-foundation .foundation-card > * {
	position: relative;
	z-index: 1;
}

.lgd-miles-foundation .foundation-card:hover {
	background: var(--wp--preset--color--ms-accent-4);
}

.lgd-miles-foundation .foundation-number {
	color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-foundation .foundation-card-copy {
	max-width: 560px;
}

/* ===== lgd-miles-process ===== */
.lgd-miles-process {
	background: var(--wp--preset--color--ms-base-3);
}

.lgd-miles-process .process-inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

.lgd-miles-process .process-intro {
	max-width: 760px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-process .process-title,
.lgd-miles-process .process-lede {
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-process .process-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-process .process-card {
	background: var(--wp--preset--color--ms-base-3);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	transition: background 0.4s ease;
}

.lgd-miles-process .process-card:hover {
	background: var(--wp--preset--color--ms-accent-4);
}

.lgd-miles-process .process-card--stat {
	background: var(--wp--preset--color--ms-accent-4);
	border-left: 3px solid var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-process .process-card strong {
	color: var(--wp--preset--color--ms-contrast);
	font-weight: 600;
}

.lgd-miles-how-it-works .process-grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.lgd-miles-foundation .foundation-grid,
	.lgd-miles-process .process-grid {
		grid-template-columns: 1fr;
	}

	.lgd-miles-how-it-works .process-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lgd-miles-foundation .foundation-card {
		min-height: 320px;
	}
}

@media (max-width: 600px) {
	.lgd-miles-how-it-works .process-grid--four {
		grid-template-columns: 1fr;
	}
}

/* ===== lgd-miles-clients ===== */
.lgd-miles-clients{
background: var(--wp--preset--color--ms-base-3);
border-bottom: 1px solid var(--wp--preset--color--ms-accent-3);
overflow: hidden;
}

.lgd-miles-clients .clients-inner{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

.lgd-miles-clients .clients-track{
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--ms-50);
  animation: marqueeRight 28s linear infinite;
  transform: translateX(-50%);
  will-change: transform;
  width: max-content;
}

.lgd-miles-clients .client-logo{
  width: clamp(120px, 14vw, 190px);
  height: 54px;
  margin: 0;
  opacity: 0.42;
  flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lgd-miles-clients .client-logo:hover{
  opacity: 0.78;
  transform: translateY(-1px);
}

.lgd-miles-clients .client-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Brand-colored SVG logos forced to a white silhouette to match the
   pre-baked white .webp logos in the train. */
.lgd-miles-clients .client-logo--invert img{
  filter: brightness(0) invert(1);
}

.lgd-miles-clients .client-sep{
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--ms-accent-1);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulseDot 3s ease-in-out infinite;
}

@keyframes marqueeRight {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(0.18em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.6;
  }
}

@keyframes heroLineGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes heroPinkReveal {
  to {
    color: var(--wp--preset--color--ms-accent-1);
  }
}



/* ===== lgd-miles-contact ===== */
/* Real LG HQ studio wall under a heavy scrim. background-image only —
   the section's bg color comes from its utility class (!important). */
.lgd-miles-contact{
background-image:
	linear-gradient(rgba(0, 0, 0, 0.955), rgba(0, 0, 0, 0.985)),
	url('../images/lg-hq-bw.jpg');
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
}

.lgd-miles-contact .contact-inner{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-contact .contact-title{
margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-contact .contact-details{
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-contact .contact-detail{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lgd-miles-contact .detail-value{
transition: color 0.3s ease;
}

.lgd-miles-contact a.detail-value:hover{
  color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-contact .contact-form{
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-contact .lgd-form{
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-contact .form-group,
.lgd-miles-contact .lgd-form__field{
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-contact .lgd-form__label{
color: var(--wp--preset--color--ms-accent-2);
font-size: var(--wp--preset--font-size--ms-small);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}

/* Doubled class outguns the parent theme's input:not():not() rule (0,2,1). */
.lgd-miles-contact .form-input.form-input,
.lgd-miles-contact .lgd-form__input.lgd-form__input{
background: transparent;
border: none;
border-bottom: 1px solid var(--wp--preset--color--ms-accent-3);
border-radius: 0;
color: var(--wp--preset--color--ms-contrast);
font-family: var(--wp--preset--font-family--libre-franklin);
font-size: var(--wp--preset--font-size--ms-medium);
padding: var(--wp--preset--spacing--ms-30) 0;
outline: 2px solid transparent;
outline-offset: 4px;
transition: border-color 0.3s ease, outline-color 0.3s ease;
width: 100%;
}

.lgd-miles-contact .form-input:focus-visible,
.lgd-miles-contact .lgd-form__input:focus-visible{
  border-color: var(--wp--preset--color--ms-accent-1);
  outline-color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-contact .form-input::placeholder,
.lgd-miles-contact .lgd-form__input::placeholder{
  color: var(--wp--preset--color--ms-accent-2);
}

.lgd-miles-contact .form-textarea,
.lgd-miles-contact textarea.lgd-form__input{
resize: vertical;
min-height: 120px;
}

.lgd-miles-contact :where(.form-submit .wp-block-button__link),
.lgd-miles-contact .lgd-form__submit{
align-self: flex-start;
}

.lgd-miles-contact .form-submit,
.lgd-miles-contact .lgd-form__submit{
margin-top: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-contact .lgd-form__submit,
.lgd-miles-newsletter .lgd-form__submit{
background: var(--wp--preset--color--ms-accent-1);
border: 1px solid var(--wp--preset--color--ms-accent-1);
border-radius: 0;
color: var(--wp--preset--color--ms-base);
cursor: pointer;
font-family: var(--wp--preset--font-family--big-shoulders-display);
font-size: var(--wp--preset--font-size--ms-medium);
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1;
min-height: 52px;
padding: var(--wp--preset--spacing--ms-30) var(--wp--preset--spacing--ms-40);
text-transform: uppercase;
transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.lgd-miles-contact .lgd-form__submit:hover,
.lgd-miles-contact .lgd-form__submit:focus-visible,
.lgd-miles-newsletter .lgd-form__submit:hover,
.lgd-miles-newsletter .lgd-form__submit:focus-visible{
background: var(--wp--preset--color--ms-contrast);
color: var(--wp--preset--color--ms-base);
transform: translateX(4px);
}

.lgd-miles-contact .lgd-form__submit:disabled,
.lgd-miles-newsletter .lgd-form__submit:disabled{
cursor: wait;
opacity: 0.72;
transform: none;
}

.lgd-miles-contact .lgd-form__hp,
.lgd-miles-newsletter .lgd-form__hp{
left: -9999px;
position: absolute;
}

.lgd-miles-contact .lgd-form-message,
.lgd-miles-newsletter .lgd-form-message,
.lgd-miles-contact .lgd-form-success,
.lgd-miles-newsletter .lgd-form-success{
border: 1px solid var(--wp--preset--color--ms-accent-3);
color: var(--wp--preset--color--ms-contrast);
font-size: var(--wp--preset--font-size--ms-small);
line-height: 1.6;
padding: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-contact .lgd-form-message--error,
.lgd-miles-newsletter .lgd-form-message--error{
border-color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-contact .lgd-form-success,
.lgd-miles-newsletter .lgd-form-success{
align-items: center;
display: flex;
gap: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-contact .lgd-form-success__icon,
.lgd-miles-newsletter .lgd-form-success__icon{
color: var(--wp--preset--color--ms-accent-1);
flex: 0 0 auto;
}

@media (max-width: 1024px){
  .lgd-miles-contact .contact-inner{
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--ms-50);
  }
}

@media (max-width: 600px){
  .lgd-miles-contact .form-submit,
  .lgd-miles-contact .lgd-form__submit{
    width: 100%;
  }
}



/* ===== lgd-miles-final-cta ===== */
.lgd-miles-final-cta{
background-color: var(--wp--preset--color--ms-base-3);
background-image:
  linear-gradient(90deg, rgba(10, 10, 10, 0.94), rgba(10, 10, 10, 0.86)),
  url('../images/lovable-gazelle-hq.jpg');
background-position: center;
background-size: cover;
text-align: center;
position: relative;
border-top: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-final-cta::before{
  content: '';
  position: absolute;
  inset: 0;
  /* Cyan + hot-pink color wash over the HQ photo scrim (no purple). */
  background:
    radial-gradient(ellipse 60% 70% at 12% 18%, rgba(var(--ms-cyan-rgb), 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 65% 75% at 88% 90%, rgba(var(--ms-accent-1-rgb), 0.18) 0%, transparent 55%);
  pointer-events: none;
}

.lgd-miles-final-cta .final-cta-inner{
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-final-cta .final-cta-title{
margin-bottom: 0;
}

.lgd-miles-final-cta .cta-line{
  display: block;
}

.lgd-miles-final-cta .final-cta-text{
max-width: 560px;
margin-bottom: var(--wp--preset--spacing--ms-40);
}

@media (max-width: 600px){
  .lgd-miles-final-cta .hero-cta-btn{
width: 100%;
text-align: center;
}

  .lgd-miles-final-cta :where(.hero-cta-btn .wp-block-button__link::after){
display: none;
}
}



/* ===== lgd-miles-hero ===== */
.lgd-miles-hero{
min-height: 75vh;
background: var(--wp--preset--color--ms-base);
font-family: var(--wp--preset--font-family--libre-franklin);
display: grid;
grid-template-rows: minmax(2rem, 1fr) auto;
gap: var(--wp--preset--spacing--ms-50);
overflow: clip;
position: relative;
padding-top: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  /* Layered magenta "swirl" overlay — adds depth to the flat black hero.
     Hot-pink + cyan glows (FITFO-aligned, no purple).
     Dial the whole effect up/down with the alpha values below. */
  background:
    radial-gradient(ellipse 60% 65% at 84% 26%, rgba(var(--ms-accent-1-rgb), 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 58% 64% at 8% 32%, rgba(var(--ms-cyan-rgb), 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 65% 70% at 14% 80%, rgba(var(--ms-accent-1-rgb), 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 60% 60% at 52% 106%, rgba(var(--ms-cyan-rgb), 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 45% 55% at 28% 6%, rgba(255,255,255,0.06) 0%, transparent 55%);
  z-index: 0;
  pointer-events: none;
}

/* ===== Hero systems line-art (animated node graph) =====
   A living "system" of nodes + links behind the hero — a literal nod to
   "we build the systems your business runs on." Sits above the swirl
   (::before z-0) and below the content (.hero-main z-2). Masked so it
   fades out on the left, keeping the headline clean. Reduced-motion is
   covered by the global [class*="lgd-miles-"] rule since this lives
   inside .lgd-miles-hero. */
.hero-systems{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 40%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 40%, #000 100%);
}

.hero-systems svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Line-art gradient stays in the blue-green family (turquoise -> blue-cyan) so
   the links never blend through purple. Pink lives only in the separate glows,
   FITFO-style. stop-2 reuses the cyan token; stop-1 is a greener turquoise. */
.hero-systems #sysGrad .sys-stop-1{ stop-color: #19E0D4; }
.hero-systems #sysGrad .sys-stop-2{ stop-color: rgb(var(--ms-cyan-rgb)); }

.hero-systems .sys-link{
  fill: none;
  stroke: url(#sysGrad);
  stroke-width: 1.25;
  stroke-dasharray: 5 7;
  opacity: 0.7;
  animation: sysFlow 2.6s linear infinite;
}

.hero-systems .sys-links line:nth-child(3n)   { animation-delay: -1.7s; }
.hero-systems .sys-links line:nth-child(3n+1) { animation-delay: -0.9s; }

@keyframes sysFlow{ to { stroke-dashoffset: -24; } }

.hero-systems .sys-node{
  fill: url(#sysGrad);
  animation: sysPulse 4s ease-in-out infinite;
}

.hero-systems .sys-nodes .sys-node:nth-child(odd)  { animation-delay: -2.2s; }
.hero-systems .sys-nodes .sys-node:nth-child(3n)   { animation-delay: -1.1s; }

@keyframes sysPulse{ 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.hero-systems .sys-halo{
  fill: none;
  stroke: rgba(var(--ms-cyan-rgb), 0.55);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: sysHalo 4.4s ease-in-out infinite;
}

.hero-systems .sys-halo:nth-of-type(even){ animation-delay: -2.2s; }

@keyframes sysHalo{ 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(2.4); opacity: 0; } }

.lgd-miles-hero .hero-main{
  display: grid;
  grid-template-columns: 1fr clamp(100px, 14vw, 200px);
  align-items: center;
  gap: var(--wp--preset--spacing--ms-50);
  padding: 0 var(--wp--preset--spacing--ms-40);
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 2;
}

.lgd-miles-hero .hero-type-block{
  min-width: 0;
}

.lgd-miles-hero .hero-location{
margin: 0 0 var(--wp--preset--spacing--ms-30) 0;
animation: heroFadeUp 0.55s ease-out 0.05s both;
}

.lgd-miles-hero .hero-headline{
margin: 0;
}

.lgd-miles-hero .hl-the{
  display: block;
  font-family: var(--wp--preset--font-family--libre-franklin);
  font-size: var(--wp--preset--font-size--ms-xl);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ms-accent-2);
  margin-bottom: var(--wp--preset--spacing--ms-20);
  line-height: 1;
  animation: heroSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.lgd-miles-hero .hl-craft{
  display: block;
  font-size: var(--wp--preset--font-size--ms-mega);
  color: var(--wp--preset--color--ms-contrast);
  animation: heroSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

.lgd-miles-hero .hl-didnt{
  display: block;
  font-size: var(--wp--preset--font-size--ms-display);
  color: var(--wp--preset--color--ms-contrast);
  line-height: 0.95;
  animation: heroSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
}

.lgd-miles-hero .hero-period{
  color: var(--wp--preset--color--ms-contrast);
  animation: heroPinkReveal 0.25s ease 0.7s forwards;
}

.lgd-miles-hero .hero-rule{
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, var(--wp--preset--color--ms-accent-1), rgba(var(--ms-accent-1-rgb), 0.4));
  border: none;
  margin: var(--wp--preset--spacing--ms-30) 0;
  transform-origin: left;
  animation: heroLineGrow 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}

.lgd-miles-hero .hero-tagline{
font-style: italic;
margin: 0 0 var(--wp--preset--spacing--ms-40) 0;
animation: heroSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}

.lgd-miles-hero .hero-body-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--ms-50);
  animation: heroFadeUp 0.55s ease-out 0.48s both;
}

.lgd-miles-hero .hero-body-text{
max-width: 460px;
margin: 0;
}

.lgd-miles-hero .hero-body-text strong{
  color: var(--wp--preset--color--ms-contrast);
  font-weight: 600;
}

.lgd-miles-hero .hero-cta-group{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--ms-20);
  flex-shrink: 0;
}

:is(.lgd-miles-hero, .lgd-miles-final-cta, .lgd-miles-wwww-hero, .lgd-miles-portfolio-hero) :where(.hero-cta-btn .wp-block-button__link){
display: inline-block;
font-family: var(--wp--preset--font-family--big-shoulders-display);
font-weight: 800;
font-size: var(--wp--preset--font-size--ms-xl);
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--ms-contrast);
/* Clean, flat hot-pink (pink -> deep pink). The old animated cyan shimmer
   band read as muddy/blurry over the pink, so it's gone; cyan now shows as
   a crisp tick (::after). Tight text-shadow for legibility, no blur. */
background: linear-gradient(100deg, var(--wp--preset--color--ms-accent-1) 0%, #D10087 100%);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
padding: var(--wp--preset--spacing--ms-30) var(--wp--preset--spacing--ms-40);
transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
position: relative;
}

:is(.lgd-miles-hero, .lgd-miles-final-cta, .lgd-miles-wwww-hero, .lgd-miles-portfolio-hero) :where(.hero-cta-btn .wp-block-button__link::after){
content: '';
display: inline-block;
width: 20px;
height: 2px;
background: rgb(var(--ms-cyan-rgb));
vertical-align: middle;
margin-left: var(--wp--preset--spacing--ms-30);
transition: width 0.3s ease, background-color 0.3s ease;
}

:is(.lgd-miles-hero, .lgd-miles-final-cta, .lgd-miles-wwww-hero, .lgd-miles-portfolio-hero) :where(.hero-cta-btn:hover .wp-block-button__link, .hero-cta-btn .wp-block-button__link:focus-visible){
filter: brightness(1.08) saturate(1.05);
color: var(--wp--preset--color--ms-contrast);
transform: translateX(4px);
box-shadow: 0 8px 30px rgba(var(--ms-accent-1-rgb), 0.35);
}

:is(.lgd-miles-hero, .lgd-miles-final-cta, .lgd-miles-wwww-hero, .lgd-miles-portfolio-hero) :where(.hero-cta-btn:hover .wp-block-button__link::after, .hero-cta-btn .wp-block-button__link:focus-visible::after){
width: 32px;
background: rgb(var(--ms-cyan-rgb));
}

.lgd-miles-hero .hero-image-accent{
  align-self: center;
  animation: heroFadeIn 0.65s ease 0.32s both;
}

.lgd-miles-hero .hero-img{
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%) contrast(1.2);
  opacity: 0.6;
  aspect-ratio: 2/3;
  object-fit: cover;
}

.lgd-miles-hero .hero-footer{
  z-index: 2;
  border-top: 1px solid var(--wp--preset--color--ms-accent-3);
  animation: heroFadeUp 0.55s ease 0.55s both;
}

.lgd-miles-hero .hero-footer-inner{
  display: flex;
  align-items: stretch;
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.lgd-miles-hero .hero-stats{
  display: flex;
  flex: 1;
  /* Override WP's is-layout-flex default (align-items:center); stretch keeps
     the stat numbers on one baseline and the dividers uniform height even when
     labels wrap to different line counts. */
  align-items: stretch;
}

.lgd-miles-hero .hero-stat{
  flex: 1;
  padding: var(--wp--preset--spacing--ms-40);
  border-right: 1px solid var(--wp--preset--color--ms-accent-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lgd-miles-hero .hero-stat:last-child{
  border-right: none;
}

.lgd-miles-hero .hero-clients{
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--ms-40);
  padding: var(--wp--preset--spacing--ms-40);
  border-left: 1px solid var(--wp--preset--color--ms-accent-3);
  flex-shrink: 0;
}

.lgd-miles-hero .hero-clients-label{
white-space: nowrap;
}

.lgd-miles-hero .hero-clients-logos{
  display: flex;
  gap: var(--wp--preset--spacing--ms-30);
  align-items: center;
}

.lgd-miles-hero .hero-client-logo{
opacity: 0.45;
transition: opacity 0.3s ease;
}

.lgd-miles-hero .hero-client-logo:hover{
  opacity: 1;
}

.lgd-miles-hero .hero-client-dot{
  width: 3px;
  height: 3px;
  background: var(--wp--preset--color--ms-accent-1);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 1024px){
  .lgd-miles-hero .hero-clients{
    display: none;
  }

  .lgd-miles-hero .hero-body-row{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--ms-40);
  }

  .lgd-miles-hero .hero-cta-group{
    align-items: flex-start;
  }
}

@media (max-width: 768px){
  .lgd-miles-hero{
    --font-size-mega: clamp(3.2rem, 16vw, 15rem);
    --font-size-display: clamp(2.5rem, 10vw, 9.5rem);
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
  }

  .lgd-miles-hero .hero-image-accent{
    display: none;
  }

  .lgd-miles-hero .hero-main{
    grid-template-columns: 1fr;
    padding: 0 var(--wp--preset--spacing--ms-30);
  }

  .lgd-miles-hero .hero-headline{
margin-bottom: var(--wp--preset--spacing--ms-30);
}

  .lgd-miles-hero .hero-stats{
    flex-wrap: wrap;
  }

  .lgd-miles-hero .hero-stat{
    flex: 1 1 45%;
    padding: var(--wp--preset--spacing--ms-30);
  }

  .lgd-miles-hero .hero-stat:nth-child(2){
    border-right: none;
  }

  .lgd-miles-hero .hero-stat:nth-child(3){
    border-top: 1px solid var(--wp--preset--color--ms-accent-3);
  }.lgd-miles-hero .hero-stat:nth-child(4){
    border-top: 1px solid var(--wp--preset--color--ms-accent-3);
  }
}

/* Tablet band: wrap the 4 hero stats into a 2x2 grid so labels like
   "Career Projects Shipped" stop wrapping to 3 lines in a cramped 1x4 row
   between 769-1024px. */
@media (min-width: 769px) and (max-width: 1024px){
  .lgd-miles-hero .hero-stats{ flex-wrap: wrap; }
  .lgd-miles-hero .hero-stat{ flex: 1 1 45%; }
  .lgd-miles-hero .hero-stat:nth-child(2){ border-right: none; }
  .lgd-miles-hero .hero-stat:nth-child(3),
  .lgd-miles-hero .hero-stat:nth-child(4){ border-top: 1px solid var(--wp--preset--color--ms-accent-3); }
}

@media (max-width: 480px){
  .lgd-miles-hero{
    --font-size-mega: clamp(2.8rem, 16vw, 15rem);
    --font-size-display: clamp(2rem, 10vw, 9.5rem);
    --font-size-huge: clamp(1.5rem, 4.5vw, 3.5rem);
  }

  .lgd-miles-hero .hl-the{
    font-size: var(--wp--preset--font-size--ms-small);
    letter-spacing: 0.4em;
  }

  .lgd-miles-hero .hero-body-text{
font-size: var(--wp--preset--font-size--ms-medium);
}

  .lgd-miles-hero :where(.hero-cta-btn .wp-block-button__link){
font-size: var(--wp--preset--font-size--ms-lg);
}

.lgd-miles-hero .hero-cta-btn{
width: 100%;
text-align: center;
}

  .lgd-miles-hero :where(.hero-cta-btn .wp-block-button__link::after){
display: none;
}

  .lgd-miles-hero .hero-stat:nth-child(3){
    display: none;
  }.lgd-miles-hero .hero-stat:nth-child(4){
    display: none;
  }

  .lgd-miles-hero .hero-stats{
    flex-wrap: nowrap;
  }

  .lgd-miles-hero .hero-stat{
    flex: 1;
  }

  .lgd-miles-hero .hero-stat:nth-child(2){
    border-right: none;
  }
}

.lgd-miles-hero .hero-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ===== lgd-miles-newsletter ===== */
.lgd-miles-newsletter{
background-color: var(--wp--preset--color--ms-base-3);
background-image:
  linear-gradient(90deg, rgba(10, 10, 10, 0.96), rgba(10, 10, 10, 0.88)),
  url('../images/sections/final-cta.svg');
background-position: center;
background-size: cover;
border-top: 1px solid var(--wp--preset--color--ms-accent-3);
border-bottom: 1px solid var(--wp--preset--color--ms-accent-3);
position: relative;
isolation: isolate;
overflow: clip;
}

.lgd-miles-newsletter .newsletter-inner{
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--wp--preset--spacing--ms-60);
  align-items: center;
}

.lgd-miles-newsletter .newsletter-title{
margin-bottom: 0;
}

.lgd-miles-newsletter .newsletter-form{
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-newsletter .form-row,
.lgd-miles-newsletter .lgd-form{
  display: flex;
  gap: 0;
}

.lgd-miles-newsletter .lgd-form__field{
flex: 1;
}

.lgd-miles-newsletter .lgd-form__label{
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

/* Doubled class outguns the parent theme's input:not():not() rule (0,2,1). */
.lgd-miles-newsletter .newsletter-input.newsletter-input,
.lgd-miles-newsletter .lgd-form__input.lgd-form__input{
flex: 1;
background: var(--wp--preset--color--ms-base);
border: 1px solid var(--wp--preset--color--ms-accent-3);
border-radius: 0;
color: var(--wp--preset--color--ms-contrast);
font-family: var(--wp--preset--font-family--libre-franklin);
font-size: var(--wp--preset--font-size--ms-small);
min-height: 52px;
padding: var(--wp--preset--spacing--ms-30) var(--wp--preset--spacing--ms-40);
outline: 2px solid transparent;
outline-offset: 3px;
transition: border-color 0.3s ease, outline-color 0.3s ease;
width: 100%;
}

.lgd-miles-newsletter .newsletter-input:focus-visible,
.lgd-miles-newsletter .lgd-form__input:focus-visible{
  border-color: var(--wp--preset--color--ms-accent-1);
  outline-color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-newsletter .newsletter-input::placeholder,
.lgd-miles-newsletter .lgd-form__input::placeholder{
  color: var(--wp--preset--color--ms-accent-2);
}

.lgd-miles-newsletter :where(.newsletter-btn .wp-block-button__link),
.lgd-miles-newsletter .lgd-form__submit{
white-space: nowrap;
}

@media (max-width: 768px){
  .lgd-miles-newsletter .newsletter-inner{
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--ms-50);
  }

  .lgd-miles-newsletter .form-row,
  .lgd-miles-newsletter .lgd-form{
    flex-direction: column;
    gap: var(--wp--preset--spacing--ms-20);
  }

  .lgd-miles-newsletter .newsletter-btn,
  .lgd-miles-newsletter .lgd-form__submit{
    width: 100%;
  }
}

/* ===== lgd-miles-pricing ===== */
.lgd-miles-pricing{
background: var(--wp--preset--color--ms-base);
position: relative;
}

.lgd-miles-pricing::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse at 0% 100%, rgba(var(--ms-accent-1-rgb), 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.lgd-miles-pricing .pricing-inner{
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.lgd-miles-pricing .pricing-header{
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-pricing .pricing-title{
margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-pricing .pricing-paths{
  margin-bottom: var(--wp--preset--spacing--ms-60);
  text-align: center;
}

.lgd-miles-pricing .paths-lead{
  max-width: 540px;
  margin: 0 auto var(--wp--preset--spacing--ms-30);
}

.lgd-miles-pricing .paths-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--wp--preset--color--ms-accent-3);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-pricing .path-card{
  background: var(--wp--preset--color--ms-base);
  padding: var(--wp--preset--spacing--ms-40);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-20);
  text-align: left;
}

.lgd-miles-pricing .path-desc{
  flex: 1;
}

.lgd-miles-pricing .path-link a{
  color: var(--wp--preset--color--ms-accent-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.lgd-miles-pricing .path-link a:hover,
.lgd-miles-pricing .path-link a:focus-visible{
  border-bottom-color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-pricing .pricing-entry{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--wp--preset--color--ms-accent-3);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
  margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-pricing .entry-card{
background: var(--wp--preset--color--ms-base);
padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-pricing .entry-name{
font-weight: 900;
text-transform: uppercase;
}

.lgd-miles-pricing .entry-desc{
flex: 1;
}

.lgd-miles-pricing .pricing-tiers-header{
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--ms-50);
}

.lgd-miles-pricing .tiers-subtitle{
margin-top: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-pricing .pricing-tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--wp--preset--color--ms-accent-3);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
  margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-pricing .tier-card{
background: var(--wp--preset--color--ms-base);
padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--ms-30);
/* Transparent top border so the three tier headers baseline-align with the
   featured card's 3px accent border. */
border-top: 3px solid transparent;
}

.lgd-miles-pricing .tier-card--featured{
background: var(--wp--preset--color--ms-accent-4);
border-top: 3px solid var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-pricing .tier-freq{
margin-top: calc(-1 * var(--wp--preset--spacing--ms-20));
}

.lgd-miles-pricing .tier-features{
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-20);
  flex: 1;
  padding: var(--wp--preset--spacing--ms-30) 0;
  border-top: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-pricing .tier-features li{
  font-size: var(--wp--preset--font-size--ms-small);
  color: var(--wp--preset--color--ms-white-subtle);
  padding-left: var(--wp--preset--spacing--ms-40);
  position: relative;
}

.lgd-miles-pricing .tier-features li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-pricing .pricing-projects{
  border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-pricing .projects-box{
  padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-pricing .projects-desc{
max-width: 500px;
flex: 1;
min-width: 280px;
}

/* All three pricing grids collapse together at 1024 so the section keeps a
   consistent single-column rhythm on tablet (previously tiers stacked at 1024
   while paths/entry stayed multi-column until 768). */
@media (max-width: 1024px){
  .lgd-miles-pricing .pricing-tiers,
  .lgd-miles-pricing .paths-grid,
  .lgd-miles-pricing .pricing-entry{
    grid-template-columns: 1fr;
  }
}

/* Jump-link targets clear any sticky header */
.lgd-miles-pricing #pricing-start,
.lgd-miles-pricing #pricing-projects,
.lgd-miles-pricing #pricing-monthly{
  scroll-margin-top: 100px;
}

@media (max-width: 600px){
  .lgd-miles-pricing .projects-box{
    flex-direction: column;
    align-items: flex-start;
  }
}

.lgd-miles-pricing .btn-primary .wp-block-button__link {
display: inline-block;
font-family: var(--wp--preset--font-family--big-shoulders-display);
font-weight: 800;
font-size: var(--wp--preset--font-size--ms-lg);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--ms-base);
background: var(--wp--preset--color--ms-contrast);
padding: var(--wp--preset--spacing--ms-30) var(--wp--preset--spacing--ms-40);
border: none;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
position: relative;
}

.lgd-miles-pricing .btn-primary:hover .wp-block-button__link,
.lgd-miles-pricing .btn-primary .wp-block-button__link:focus-visible {
background: var(--wp--preset--color--ms-accent-1);
color: var(--wp--preset--color--ms-contrast);
transform: translateX(4px);
}

.lgd-miles-pricing .btn-outline .wp-block-button__link {
display: inline-block;
font-family: var(--wp--preset--font-family--big-shoulders-display);
font-weight: 800;
font-size: var(--wp--preset--font-size--ms-lg);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--ms-contrast);
background: transparent;
padding: var(--wp--preset--spacing--ms-30) var(--wp--preset--spacing--ms-40);
border: 2px solid var(--wp--preset--color--ms-accent-3);
cursor: pointer;
transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.lgd-miles-pricing .btn-outline:hover .wp-block-button__link,
.lgd-miles-pricing .btn-outline .wp-block-button__link:focus-visible {
border-color: var(--wp--preset--color--ms-accent-1);
color: var(--wp--preset--color--ms-accent-1);
transform: translateX(4px);
}

/* ===== lgd-miles-problem ===== */
.lgd-miles-problem {
	background: var(--wp--preset--color--ms-base-3);
	position: relative;
}

.lgd-miles-problem::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 12% 20%, rgba(var(--ms-accent-1-rgb), 0.05) 0%, transparent 55%);
	pointer-events: none;
}

.lgd-miles-problem .problem-inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--wp--preset--spacing--ms-60);
	align-items: start;
	position: relative;
	z-index: 1;
}

.lgd-miles-problem .problem-title,
.lgd-miles-problem .problem-lede {
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-problem .problem-list {
	border: 1px solid var(--wp--preset--color--ms-accent-3);
	background: var(--wp--preset--color--ms-base);
}

.lgd-miles-problem .problem-item {
	gap: var(--wp--preset--spacing--ms-30);
	padding: var(--wp--preset--spacing--ms-40);
	border-bottom: 1px solid var(--wp--preset--color--ms-accent-3);
	transition: background 0.4s ease;
}

.lgd-miles-problem .problem-item:last-child {
	border-bottom: none;
}

.lgd-miles-problem .problem-item:hover {
	background: var(--wp--preset--color--ms-accent-4);
}

.lgd-miles-problem .problem-item strong {
	color: var(--wp--preset--color--ms-contrast);
	font-weight: 600;
}

.lgd-miles-problem .problem-mark {
	flex: 0 0 auto;
	line-height: 1;
}

/* ===== lgd-miles-spotlights ===== */
.lgd-miles-spotlights {
	background: var(--wp--preset--color--ms-base);
	position: relative;
}

.lgd-miles-spotlights::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 70%;
	background: radial-gradient(ellipse at 100% 0%, rgba(var(--ms-accent-1-rgb), 0.04) 0%, transparent 60%);
	pointer-events: none;
}

.lgd-miles-spotlights .spotlights-inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-spotlights .spotlights-header {
	max-width: 720px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-spotlights .spotlights-title {
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-spotlights .spotlight-stack {
	border-top: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-spotlights .spotlight-row {
	display: grid;
	grid-template-columns: minmax(7rem, 0.24fr) 1fr;
	gap: var(--wp--preset--spacing--ms-50);
	padding: var(--wp--preset--spacing--ms-50) 0;
	border-bottom: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-spotlights .spotlight-number {
	margin: 0;
	opacity: 0.9;
}

.lgd-miles-spotlights .spotlight-content {
	max-width: 840px;
}

/* ===== lgd-miles-capabilities ===== */
.lgd-miles-capabilities {
	background: var(--wp--preset--color--ms-base-3);
}

.lgd-miles-capabilities .capabilities-inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

.lgd-miles-capabilities .capabilities-header {
	max-width: 760px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-capabilities .capabilities-title,
.lgd-miles-capabilities .capabilities-lede {
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-capabilities .capabilities-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-capabilities .capability-card {
	background: var(--wp--preset--color--ms-base-3);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	transition: background 0.4s ease;
}

.lgd-miles-capabilities .capability-card:hover {
	background: var(--wp--preset--color--ms-accent-4);
}

@media (max-width: 1024px) {
	.lgd-miles-problem .problem-inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--ms-50);
	}

	.lgd-miles-capabilities .capabilities-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.lgd-miles-spotlights .spotlight-row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--ms-30);
	}
}

@media (max-width: 600px) {
	.lgd-miles-capabilities .capabilities-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== lgd-miles-services ===== */
.lgd-miles-services{
background: var(--wp--preset--color--ms-base);
position: relative;
}

.lgd-miles-services::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse at 100% 20%, rgba(var(--ms-accent-1-rgb), 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.lgd-miles-services .services-inner{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}

.lgd-miles-services .services-header{
  margin-bottom: var(--wp--preset--spacing--ms-60);
  max-width: 600px;
}

.lgd-miles-services .services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--wp--preset--color--ms-accent-3);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-services .service-card{
  background: var(--wp--preset--color--ms-base);
  padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--ms-30);
  position: relative;
  transition: background 0.4s ease;
  cursor: default;
}

.lgd-miles-services .service-card:hover{
  background: var(--wp--preset--color--ms-accent-4);
}

.lgd-miles-services .service-card:hover .service-arrow{
  opacity: 1;
  transform: translateX(0);
}

.lgd-miles-services .service-card:hover .service-number{
  color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-services .service-number{
transition: color 0.4s ease;
}

.lgd-miles-services .service-desc{
flex: 1;
}

.lgd-miles-services .service-arrow{
  display: block;
  width: 30px;
  height: 2px;
  background: var(--wp--preset--color--ms-accent-1);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  margin-top: var(--wp--preset--spacing--ms-30);
}

@media (max-width: 1024px){
  .lgd-miles-services .services-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .lgd-miles-services .services-grid{
    grid-template-columns: 1fr;
  }
}

.lgd-miles-services .section-label.section-label {
margin-block-end: var(--wp--preset--spacing--ms-30);
}

/* ===== lgd-miles-stats ===== */
.lgd-miles-stats{
background: var(--wp--preset--color--ms-base-3);
border-top: 1px solid var(--wp--preset--color--ms-accent-3);
border-bottom: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-stats .stats-inner{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--wp--preset--spacing--ms-60);
  align-items: center;
}

.lgd-miles-stats .stats-text{
max-width: 440px;
}

.lgd-miles-stats .stats-numbers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-stats .stat-block{
  text-align: center;
  padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-30);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
  position: relative;
  transition: border-color 0.4s ease;
}

.lgd-miles-stats .stat-block:hover{
  border-color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-stats .stat-block:hover .stat-plus{
  color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-stats .stat-big{
display: block;
}

.lgd-miles-stats .stat-plus{
transition: color 0.4s ease;
}

.lgd-miles-stats .stat-label{
display: block;
margin-top: var(--wp--preset--spacing--ms-20);
}

@media (max-width: 1024px){
  .lgd-miles-stats .stats-inner{
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--ms-50);
  }
}

@media (max-width: 600px){
  .lgd-miles-stats .stats-numbers{
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--ms-30);
  }
}



/* ===== lgd-miles-testimonials ===== */
.lgd-miles-testimonials{
background: var(--wp--preset--color--ms-base-3);
border-top: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-testimonials .testimonials-inner{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}

.lgd-miles-testimonials .testimonials-header{
  margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-testimonials .testimonials-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px;
  background: var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-testimonials .testimonial-card{
background: var(--wp--preset--color--ms-base-3);
padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--wp--preset--spacing--ms-40);
transition: background 0.4s ease;
}

.lgd-miles-testimonials .testimonial-card:hover{
  background: var(--wp--preset--color--ms-accent-4);
}

.lgd-miles-testimonials .testimonial-card--featured{
background: var(--wp--preset--color--ms-accent-4);
border-left: 3px solid var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-testimonials .testimonial-headshot{
  width: 82px;
  height: 82px;
  margin: 0;
  border: 2px solid rgba(var(--ms-contrast-rgb), 0.16);
  border-radius: 50%;
  overflow: hidden;
}

.lgd-miles-testimonials .testimonial-headshot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lgd-miles-testimonials .testimonial-quote{
font-size: var(--wp--preset--font-size--ms-lg);
color: var(--wp--preset--color--ms-white-subtle);
line-height: 1.7;
font-style: normal;
}

.lgd-miles-testimonials .testimonial-card--featured .testimonial-quote{
  font-size: var(--wp--preset--font-size--ms-xx-large);
  color: var(--wp--preset--color--ms-contrast);
  line-height: 1.5;
}

.lgd-miles-testimonials .testimonial-author{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 1024px){
  .lgd-miles-testimonials .testimonials-grid{
    grid-template-columns: 1fr 1fr;
  }

  .lgd-miles-testimonials .testimonial-card--featured{
grid-column: 1 / -1;
}
}

@media (max-width: 600px){
  .lgd-miles-testimonials .testimonials-grid{
    grid-template-columns: 1fr;
  }

  .lgd-miles-testimonials .testimonial-card--featured .testimonial-quote{
    font-size: var(--wp--preset--font-size--ms-lg);
  }
}

/* =================================================================
   INTERIOR-PAGE HERO AURORA
   The opening section of every interior page (page-no-title template,
   minus the home hero which has its own treatment) gets a soft, slowly
   drifting cyan/pink aurora so interior heroes read less flat. Reusable,
   no DB edits. A pseudo-element + isolation keeps it BEHIND content
   (z-index:-1) and non-destructive — it never overrides a section's own
   background. Transform-based drift = GPU-composited (no repaint).
   ================================================================= */
body.page-template-page-no-title:not(.page-id-1371) .wp-block-post-content > section:first-of-type{
	position: relative;
	isolation: isolate;
	overflow: clip;
}
body.page-template-page-no-title:not(.page-id-1371) .wp-block-post-content > section:first-of-type::after{
	content: '';
	position: absolute;
	inset: -8%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 46% 52% at 84% 14%, rgba(var(--ms-accent-1-rgb), 0.18) 0%, transparent 62%),
		radial-gradient(ellipse 42% 50% at 10% 30%, rgba(var(--ms-cyan-rgb), 0.16) 0%, transparent 62%);
	animation: lgdHeroAurora 22s ease-in-out infinite alternate;
	will-change: transform, opacity;
}
@keyframes lgdHeroAurora{
	from { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.9; }
	to   { transform: translate3d(2%, -3%, 0) scale(1.08); opacity: 1; }
}

/* Per-page bespoke animated SVG hero backgrounds. Each .svg self-animates and
   carries its own prefers-reduced-motion guard; here we just swap the opening
   section's ::after aurora for the page's SVG, scoped by page-id. Placed after
   the aurora block so it wins on equal specificity. Files: assets/images/heroes/. */
body.page-template-page-no-title.page-id-477 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/about-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-478 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/services-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1366 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/ai-growth-systems-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1382 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/ai-readiness-assessment-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-480 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/pricing-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-482 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/contact-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1122 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/plumber-marketing-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1124 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/hvac-marketing-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1125 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/electrician-marketing-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-782 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/book-a-call-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1362 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/about-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1383 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/services-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-1387 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/ai-readiness-assessment-hero.svg") center center / cover no-repeat;
}
body.page-template-page-no-title.page-id-784 .wp-block-post-content > section:first-of-type::after{
	inset: 0; animation: none; opacity: 1;
	background: url("../images/heroes/services-hero.svg") center center / cover no-repeat;
}

/* These utility pages use cover blocks instead of section-based Miles heroes. */
body.page-id-920 .wp-block-post-content > .wp-block-cover:first-of-type{
	background: #000000 url("../images/wds-team-wall.jpg") center center / cover no-repeat;
}
body.page-id-920 .wp-block-post-content{
	overflow-x: clip;
}
body.page-id-920 .wp-block-embed,
body.page-id-920 .wp-block-embed__wrapper,
body.page-id-920 .wp-block-embed iframe{
	max-width: 100%;
	min-width: 0;
}
body.page-id-3 main.site-content > .wp-block-cover:first-of-type{
	background-color: #000000;
}

/* Reusable animated section-type backgrounds — one SVG per section TYPE, applied
   by class wherever that section appears (home + interior). Extra-subtle, edge-
   confined; pseudo-element + isolation keeps it behind content (z-index:-1) and
   non-destructive. Each SVG self-animates + carries its own reduced-motion guard. */
.lgd-miles-final-cta,
.lgd-miles-stats,
.lgd-miles-problem,
.lgd-miles-testimonials{
	position: relative;
	isolation: isolate;
}
.lgd-miles-final-cta::after,
.lgd-miles-stats::after,
.lgd-miles-problem::after,
.lgd-miles-testimonials::after{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.lgd-miles-final-cta::after   { background-image: url("../images/sections/final-cta.svg"); }
.lgd-miles-stats::after       { background-image: url("../images/sections/stats.svg"); }
.lgd-miles-problem::after     { background-image: url("../images/sections/problem.svg"); }
.lgd-miles-testimonials::after{ background-image: url("../images/sections/testimonials.svg"); }

/* Cover-block keeper pages (who-we-work-with 1362, faq 994): a subtle animated
   overlay above the cover photo but below the cover content. WP cover's
   .wp-block-cover__inner-container is z-index:1, so ::after at z-index:0 stays
   behind the text. (image+SVG combination.) */
body.page-id-1362 .wp-block-post-content > .wp-block-cover:first-of-type::after,
body.page-id-994  .wp-block-post-content > .wp-block-cover:first-of-type::after,
body.page-id-3    main.site-content > .wp-block-cover:first-of-type::after{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: url("../images/sections/cover-overlay.svg") center center / cover no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	body.page-template-page-no-title .wp-block-post-content > section:first-of-type::after {
		animation: none !important;
	}

	/* Collapse duration rather than `animation: none` — the shorthand resets
	   animation-name, so `forwards`/`both` end states never resolve and the
	   hero's pink period would stay white. */
	[class*="lgd-miles-"],
	[class*="lgd-miles-"] *,
	[class*="lgd-miles-"]::before,
	[class*="lgd-miles-"]::after,
	[class*="lgd-trade-"],
	[class*="lgd-trade-"] *,
	[class*="lgd-trade-"]::before,
	[class*="lgd-trade-"]::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.lgd-miles-clients .clients-track {
		animation: none !important;
		transform: none !important;
	}
}

/* =================================================================
   BLOG — Miles listing cards + single post reading surface
   ================================================================= */
/* The real WebDevStudios team wall (b&w panorama) behind the blog hero —
   career receipts as a cover background under a heavy scrim. */
.lgd-miles-blog-hero {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.93)),
		url('../images/wds-team-wall.jpg');
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
}

.lgd-miles-blog-grid .blog-card {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.lgd-miles-blog-grid .blog-card:hover {
	border-color: var(--wp--preset--color--ms-accent-1);
	transform: translateY(-2px);
}

.lgd-miles-blog-grid .wp-block-query-pagination a,
.lgd-miles-blog-grid .wp-block-query-pagination-numbers .page-numbers {
	color: var(--wp--preset--color--ms-white-subtle);
}

.lgd-miles-blog-grid .wp-block-query-pagination a:hover,
.lgd-miles-blog-grid .wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--wp--preset--color--ms-accent-1);
}

/* Post body typography on the black reading surface. Global styles
   give headings/captions dark colors that vanish on ms-base. */
.lgd-miles-post-content h1,
.lgd-miles-post-content h2,
.lgd-miles-post-content h3,
.lgd-miles-post-content h4,
.lgd-miles-post-content h5,
.lgd-miles-post-content h6 {
	color: var(--wp--preset--color--ms-contrast);
}

.lgd-miles-post-content p,
.lgd-miles-post-content li {
	color: var(--wp--preset--color--ms-white-subtle);
}

.lgd-miles-post-content blockquote {
	border-left: 3px solid var(--wp--preset--color--ms-accent-1);
	color: var(--wp--preset--color--ms-contrast);
}

.lgd-miles-post-content figcaption {
	color: var(--wp--preset--color--ms-accent-2);
}

.lgd-miles-post-content code,
.lgd-miles-post-content pre {
	background: var(--wp--preset--color--ms-accent-4);
	color: var(--wp--preset--color--ms-contrast);
}

/* =================================================================
   SHARED MOTION & TEXTURE — Miles signature moves
   ================================================================= */

/* Eyebrow tick: a pink dash draws in before each left-aligned section
   label when its section reveals (.lgd-visible via lgd-scroll-reveal.js).
   Centered labels are excluded so centering stays optically true. */
[class*="lgd-miles-"] .section-label:not(.has-text-align-center)::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--ms-accent-1);
	vertical-align: 0.22em;
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, margin-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.lgd-visible .section-label:not(.has-text-align-center)::before {
	width: 22px;
	margin-right: var(--wp--preset--spacing--ms-20);
}

/* One hover language for every card: the blog cards' 2px lift,
   applied to all Miles card surfaces alongside their bg shifts. */
.lgd-miles-foundation .foundation-card,
.lgd-miles-process .process-card,
.lgd-miles-services .service-card,
.lgd-miles-capabilities .capability-card,
.lgd-miles-testimonials .testimonial-card,
.lgd-miles-stats .stat-block,
.lgd-miles-pricing .entry-card,
.lgd-miles-pricing .tier-card,
.lgd-miles-problem .problem-item {
	transition: background 0.4s ease, border-color 0.4s ease, transform 0.25s ease;
}

.lgd-miles-foundation .foundation-card:hover,
.lgd-miles-process .process-card:hover,
.lgd-miles-services .service-card:hover,
.lgd-miles-capabilities .capability-card:hover,
.lgd-miles-testimonials .testimonial-card:hover,
.lgd-miles-stats .stat-block:hover,
.lgd-miles-pricing .entry-card:hover,
.lgd-miles-pricing .tier-card:hover {
	transform: translateY(-2px);
}

/* Image utility: add ms-duotone to any image's wrapping group/figure to
   get the Miles photo treatment — grayscale punch + pink cast. Built for
   the incoming real photography; the about/hero images can migrate to it. */
.ms-duotone {
	position: relative;
	overflow: hidden;
}

.ms-duotone img {
	filter: grayscale(1) contrast(1.12);
	display: block;
}

.ms-duotone::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(var(--ms-accent-1-rgb), 0.14) 0%, transparent 55%);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* =====================================================================
   TRADE LANDING PAGES (.lgd-trade-*) — Miles-native, ms-* token driven
   Generated bodies for the 17 SEO trade pages. Mirrors pricing hairline
   grids; reuses the design tokens so it matches the rest of Miles.
   ===================================================================== */
.lgd-trade-hero{ text-align: center; }
.lgd-trade-hero .tl-h1{ margin: 0 auto; max-width: 18ch; text-transform: uppercase; }
.lgd-trade-hero .tl-hero-sub{ max-width: 640px; margin: var(--wp--preset--spacing--ms-30) auto 0; }
.lgd-trade-hero .tl-trust{ margin-top: var(--wp--preset--spacing--ms-30); letter-spacing: 0.04em; }

/* Section heading block, centered, constrained */
.lgd-trade-lp .tl-head,
[class*="lgd-trade-"] .tl-head{ text-align: center; margin: 0 auto var(--wp--preset--spacing--ms-50); }
[class*="lgd-trade-"] .tl-title{ text-transform: uppercase; }

/* Card grids (3-up hairline) */
[class*="lgd-trade-"] .tl-grid,
[class*="lgd-trade-"] .tl-step-grid,
[class*="lgd-trade-"] .tl-stat-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--wp--preset--color--ms-accent-3);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
}
[class*="lgd-trade-"] .tl-fit-grid,
[class*="lgd-trade-"] .tl-link-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--wp--preset--color--ms-accent-3);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
}
[class*="lgd-trade-"] .tl-card,
[class*="lgd-trade-"] .tl-step,
[class*="lgd-trade-"] .tl-fit-card,
[class*="lgd-trade-"] .tl-link-card,
[class*="lgd-trade-"] .tl-stat{
  background: var(--wp--preset--color--ms-base);
  padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--ms-20);
}
[class*="lgd-trade-"] .tl-card-title,
[class*="lgd-trade-"] .tl-link-title,
[class*="lgd-trade-"] .tl-fit-card .tl-card-title{ text-transform: uppercase; font-weight: 900; }
[class*="lgd-trade-"] .tl-card-body{ flex: 1; }

/* Stats: pink numbers, big */
[class*="lgd-trade-"] .tl-stat-num{ color: var(--wp--preset--color--ms-accent-1); line-height: 1; }

/* Outcomes checklist: pink dash markers (matches pricing tier features) */
.lgd-trade-outcomes .tl-checklist{
  list-style: none; margin: 0 auto; padding: 0; max-width: 720px;
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--ms-20);
}
.lgd-trade-outcomes .tl-checklist li{
  position: relative; padding-left: var(--wp--preset--spacing--ms-40);
  color: var(--wp--preset--color--ms-white-subtle);
}
.lgd-trade-outcomes .tl-checklist li::before{
  content: ''; position: absolute; left: 0; top: 0.6em; width: 10px; height: 2px;
  background: var(--wp--preset--color--ms-accent-1);
}

/* Link cards */
[class*="lgd-trade-"] .tl-link-go a{
  color: var(--wp--preset--color--ms-accent-1); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
[class*="lgd-trade-"] .tl-link-go a:hover,
[class*="lgd-trade-"] .tl-link-go a:focus-visible{ border-bottom-color: var(--wp--preset--color--ms-accent-1); }

/* FAQ accordion */
.lgd-trade-faq .tl-faq-item{
  border-top: 1px solid var(--wp--preset--color--ms-accent-3);
  padding: var(--wp--preset--spacing--ms-30) 0; max-width: 760px; margin: 0 auto;
}
.lgd-trade-faq .tl-faq-item summary{
  cursor: pointer; font-weight: 700; color: var(--wp--preset--color--ms-contrast);
  font-size: var(--wp--preset--font-size--ms-lg); list-style: none;
}
.lgd-trade-faq .tl-faq-item summary::-webkit-details-marker{ display: none; }
.lgd-trade-faq .tl-faq-item[open] summary{ color: var(--wp--preset--color--ms-accent-1); }
.lgd-trade-faq .tl-faq-item p{
  color: var(--wp--preset--color--ms-white-subtle);
  margin-top: var(--wp--preset--spacing--ms-20); line-height: 1.7;
}

/* Final CTA */
.lgd-trade-cta{ text-align: center; }
.lgd-trade-cta .tl-cta-inner{ max-width: 940px; margin: 0 auto; }

/* Card hover lift (matches site-wide 2px lift) */
[class*="lgd-trade-"] .tl-card,
[class*="lgd-trade-"] .tl-link-card,
[class*="lgd-trade-"] .tl-step{ transition: transform 0.2s ease; }
[class*="lgd-trade-"] .tl-card:hover,
[class*="lgd-trade-"] .tl-link-card:hover,
[class*="lgd-trade-"] .tl-step:hover{ transform: translateY(-2px); }

@media (max-width: 1024px){
  [class*="lgd-trade-"] .tl-grid,
  [class*="lgd-trade-"] .tl-step-grid,
  [class*="lgd-trade-"] .tl-stat-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  [class*="lgd-trade-"] .tl-fit-grid,
  [class*="lgd-trade-"] .tl-link-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   TRADE LANDING PAGES — PIZZAZZ PASS
   Amplifies the Miles signature: pink radial section glows, elevated
   gradient cards with hover glow, pink underline accents, oversized
   accent numbers. Scoped to .lgd-trade-*; inherited by all 17 pages.
   ===================================================================== */

/* Section accent glows (the signature Miles move my base CSS skipped) */
[class*="lgd-trade-"]{ position: relative; isolation: isolate; }
[class*="lgd-trade-"] > *{ position: relative; z-index: 1; }
.lgd-trade-hero::before,
.lgd-trade-pains::before,
.lgd-trade-needs::before,
.lgd-trade-outcomes::before,
.lgd-trade-stats::before,
.lgd-trade-process::before,
.lgd-trade-fit::before,
.lgd-trade-faq::before,
.lgd-trade-links::before,
.lgd-trade-cta::before{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.lgd-trade-hero::before{ background: radial-gradient(ellipse 65% 75% at 50% -5%, rgba(var(--ms-accent-1-rgb),0.12) 0%, transparent 62%); }
.lgd-trade-pains::before{ background: radial-gradient(ellipse 55% 65% at 100% 0%, rgba(var(--ms-accent-1-rgb),0.06) 0%, transparent 60%); }
.lgd-trade-needs::before{ background: radial-gradient(ellipse 55% 65% at 0% 100%, rgba(var(--ms-accent-1-rgb),0.05) 0%, transparent 60%); }
.lgd-trade-outcomes::before{ background: radial-gradient(ellipse 50% 60% at 90% 50%, rgba(var(--ms-accent-1-rgb),0.05) 0%, transparent 60%); }
.lgd-trade-stats::before{ background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(var(--ms-accent-1-rgb),0.06) 0%, transparent 65%); }
.lgd-trade-process::before{ background: radial-gradient(ellipse 55% 65% at 10% 0%, rgba(var(--ms-accent-1-rgb),0.05) 0%, transparent 60%); }
.lgd-trade-fit::before{ background: radial-gradient(ellipse 55% 65% at 100% 100%, rgba(var(--ms-accent-1-rgb),0.05) 0%, transparent 60%); }
.lgd-trade-faq::before{ background: radial-gradient(ellipse 50% 60% at 0% 0%, rgba(var(--ms-accent-1-rgb),0.04) 0%, transparent 58%); }
.lgd-trade-links::before{ background: radial-gradient(ellipse 55% 65% at 100% 0%, rgba(var(--ms-accent-1-rgb),0.05) 0%, transparent 60%); }
.lgd-trade-cta::before{ background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(var(--ms-accent-1-rgb),0.16) 0%, transparent 60%); }

/* Laptop-width interiors: widen the multi-column grids past the stored 1100px
   section constraint. Enumerated on purpose: a blanket child selector here
   outranks the per-element measures below (.tl-h1, .tl-hero-sub, .tl-checklist,
   .tl-faq-item, .tl-cta-inner) and stretches reading copy to full width. */
@media (min-width: 1025px){
  section.wp-block-group[class*="lgd-trade-"] > :is(
    .tl-grid,
    .tl-stat-grid,
    .tl-step-grid,
    .tl-fit-grid,
    .tl-link-grid,
    .tl-keyfacts-grid
  ),
  section.wp-block-group.lgd-ownrent-compare > .ownrent-grid{
    max-width: 1180px;
  }
}

/* Long trade pages need visible section rhythm, not an uninterrupted black
   canvas. Alternate the top-level surfaces while keeping the existing glows.
   Scoped to no-title landing pages so the band cannot leak onto the front
   page, which also carries lgd-trade-* markup. */
body.page-template-page-no-title:not(.home) .wp-block-post-content > section[class*="lgd-trade-"]:not(.lgd-trade-hero):not(.lgd-trade-cta):nth-of-type(even){
  background-color: var(--wp--preset--color--ms-base-3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Proof bands get the same restrained data-line artwork used by Miles stats. */
.lgd-trade-stats::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../images/sections/stats.svg') center / cover no-repeat;
  opacity: 0.72;
}

/* Shared conversion-band language across Miles-adjacent and trade interiors.
   A strong scrim preserves contrast over the real HQ image; the section SVG
   supplies the branded cyan/pink edge detail. */
:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
){
  background-color: var(--wp--preset--color--ms-base-3) !important;
  background-image:
    linear-gradient(90deg, rgba(10, 10, 10, 0.94), rgba(10, 10, 10, 0.86)),
    url('../images/lovable-gazelle-hq.jpg') !important;
  background-position: center !important;
  background-size: cover !important;
  border-top: 1px solid var(--wp--preset--color--ms-accent-3);
  position: relative;
  isolation: isolate;
  overflow: clip;
}

:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
)::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 12% 18%, rgba(var(--ms-cyan-rgb), 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 65% 75% at 88% 90%, rgba(var(--ms-accent-1-rgb), 0.18) 0%, transparent 55%);
}

:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
)::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../images/sections/final-cta.svg') center / cover no-repeat;
}

:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
) > *{
  position: relative;
  z-index: 1;
}

:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
) .wp-block-buttons{
  gap: var(--wp--preset--spacing--ms-20);
  justify-content: center;
}

:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
) .wp-block-button:first-child .wp-block-button__link{
  background: linear-gradient(100deg, var(--wp--preset--color--ms-accent-1) 0%, #D10087 100%) !important;
  border: 1px solid var(--wp--preset--color--ms-accent-1) !important;
  color: var(--wp--preset--color--ms-contrast) !important;
  font-family: var(--wp--preset--font-family--big-shoulders-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
) .wp-block-button:not(:first-child) .wp-block-button__link{
  background: rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(var(--ms-cyan-rgb), 0.52) !important;
  color: var(--wp--preset--color--ms-contrast) !important;
  font-family: var(--wp--preset--font-family--big-shoulders-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
) .wp-block-button .wp-block-button__link:hover,
:is(
  .lgd-trade-cta,
  body.page-id-920 .wp-block-post-content > section:last-of-type,
  body.page-id-784 .wp-block-post-content > section:last-of-type
) .wp-block-button .wp-block-button__link:focus-visible{
  border-color: var(--wp--preset--color--ms-accent-1) !important;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

@media (max-width: 600px){
  :is(
    .lgd-trade-cta,
    body.page-id-920 .wp-block-post-content > section:last-of-type,
    body.page-id-784 .wp-block-post-content > section:last-of-type
  ) .wp-block-buttons,
  :is(
    .lgd-trade-cta,
    body.page-id-920 .wp-block-post-content > section:last-of-type,
    body.page-id-784 .wp-block-post-content > section:last-of-type
  ) .wp-block-button,
  :is(
    .lgd-trade-cta,
    body.page-id-920 .wp-block-post-content > section:last-of-type,
    body.page-id-784 .wp-block-post-content > section:last-of-type
  ) .wp-block-button__link{
    width: 100%;
  }
}

/* Pink gradient underline accent under every section title */
[class*="lgd-trade-"] .tl-head .tl-title::after{
  content: ''; display: block; width: 60px; height: 4px;
  margin: var(--wp--preset--spacing--ms-30) auto 0;
  background: linear-gradient(90deg, var(--wp--preset--color--ms-accent-1), rgba(var(--ms-accent-1-rgb),0.25));
}

/* Cards: separated, elevated gradient, pink hover glow + lift */
[class*="lgd-trade-"] .tl-grid,
[class*="lgd-trade-"] .tl-step-grid,
[class*="lgd-trade-"] .tl-stat-grid{
  gap: var(--wp--preset--spacing--ms-20);
  background: transparent; border: 0;
}
[class*="lgd-trade-"] .tl-fit-grid,
[class*="lgd-trade-"] .tl-link-grid{
  gap: var(--wp--preset--spacing--ms-20);
  background: transparent; border: 0;
}
[class*="lgd-trade-"] .tl-card,
[class*="lgd-trade-"] .tl-step,
[class*="lgd-trade-"] .tl-fit-card,
[class*="lgd-trade-"] .tl-link-card,
[class*="lgd-trade-"] .tl-stat{
  background: linear-gradient(160deg, #161616 0%, #0b0b0b 100%);
  border: 1px solid rgba(255,255,255,0.07);
  position: relative; overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
[class*="lgd-trade-"] .tl-card::after,
[class*="lgd-trade-"] .tl-step::after,
[class*="lgd-trade-"] .tl-fit-card::after,
[class*="lgd-trade-"] .tl-link-card::after{
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 18% 0%, rgba(var(--ms-accent-1-rgb),0.10) 0%, transparent 55%);
  transition: opacity 0.25s ease;
}
[class*="lgd-trade-"] .tl-card:hover,
[class*="lgd-trade-"] .tl-step:hover,
[class*="lgd-trade-"] .tl-fit-card:hover,
[class*="lgd-trade-"] .tl-link-card:hover,
[class*="lgd-trade-"] .tl-stat:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--ms-accent-1-rgb),0.55);
  box-shadow: 0 20px 44px -14px rgba(var(--ms-accent-1-rgb),0.28);
}
[class*="lgd-trade-"] .tl-card:hover::after,
[class*="lgd-trade-"] .tl-step:hover::after,
[class*="lgd-trade-"] .tl-fit-card:hover::after,
[class*="lgd-trade-"] .tl-link-card:hover::after{ opacity: 1; }

/* Oversized pink stat numbers, centered */
.lgd-trade-stats .tl-stat{ text-align: center; align-items: center; }
.lgd-trade-stats .tl-stat-num{
  color: var(--wp--preset--color--ms-accent-1) !important;
  font-size: clamp(3.25rem, 6vw, 5rem) !important; line-height: 0.95;
}

/* Process: big ghosted pink step numbers (override WP's !important preset utilities) */
.lgd-trade-process .tl-step .tl-card-num{
  font-family: var(--wp--preset--font-family--big-shoulders-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important; font-weight: 900; line-height: 1;
  color: rgba(var(--ms-accent-1-rgb),0.85) !important; letter-spacing: 0;
}

/* Outcomes checklist: lift onto its own elevated panel */
.lgd-trade-outcomes .tl-checklist{
  background: linear-gradient(160deg, #161616 0%, #0b0b0b 100%);
  border: 1px solid rgba(255,255,255,0.07);
  padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-50);
  max-width: 760px;
}

/* FAQ: pink "+" indicator that rotates open */
.lgd-trade-faq .tl-faq-item summary{ display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--ms-30); }
.lgd-trade-faq .tl-faq-item summary::after{
  content: '+'; color: var(--wp--preset--color--ms-accent-1);
  font-size: 1.6em; line-height: 1; font-weight: 400;
  transition: transform 0.25s ease; flex: none;
}
.lgd-trade-faq .tl-faq-item[open] summary::after{ transform: rotate(45deg); }

/* =====================================================================
   BOOK-A-CALL — reuses .lgd-trade-* section kit; adds calendar/quotes glow,
   team avatar row, and testimonial quote cards.
   ===================================================================== */
.lgd-trade-calendar::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 65% 80% at 50% 0%, rgba(var(--ms-accent-1-rgb),0.10) 0%, transparent 62%); }
.lgd-trade-quotes::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 55% 65% at 0% 50%, rgba(var(--ms-accent-1-rgb),0.05) 0%, transparent 60%); }

/* Booking section: meet-the-team row */
.lgd-trade-calendar .bookcall-team{
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--ms-50);
  margin-top: var(--wp--preset--spacing--ms-30);
}
.lgd-trade-calendar .bookcall-person{ display: flex; align-items: center; gap: var(--wp--preset--spacing--ms-20); }
.lgd-trade-calendar .bookcall-person img{
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(var(--ms-accent-1-rgb),0.5);
}
.lgd-trade-calendar .bookcall-person .nm{ font-weight: 800; color: var(--wp--preset--color--ms-contrast); line-height: 1.1; }
.lgd-trade-calendar .bookcall-person .rl{ font-size: var(--wp--preset--font-size--ms-small); color: var(--wp--preset--color--ms-accent-2); }

/* Inline booking calendar embed ([lgd_booking] shortcode). Sits above the
   section ::before glow; min-height is the fallback when GHL's form_embed.js
   auto-resize is unavailable. */
.lgd-booking-embed{
  position: relative; z-index: 1;
  max-width: 900px; margin: var(--wp--preset--spacing--ms-40) auto 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(var(--ms-accent-1-rgb),0.25);
}
.lgd-booking-embed__frame{ display: block; width: 100%; border: 0; min-height: 720px; }
@media (max-width: 782px){ .lgd-booking-embed__frame{ min-height: 640px; } }

/* =====================================================================
   BUILD VS BUY — own vs rent comparison infographic (.lgd-ownrent-compare).
   Reuses the .lgd-trade-* section shell + .tl-head; adds the two-column
   rent/own cards with contrast (X vs check) bullet markers.
   ===================================================================== */
.lgd-ownrent-compare{ position: relative; }
.lgd-ownrent-compare::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(var(--ms-accent-1-rgb),0.08) 0%, transparent 62%); }
.lgd-ownrent-compare > *{ position: relative; z-index: 1; }

.lgd-ownrent-compare .ownrent-grid{ margin-top: var(--wp--preset--spacing--ms-40); align-items: stretch; }
.lgd-ownrent-compare .ownrent-col{
  border-radius: 16px;
  padding: var(--wp--preset--spacing--ms-40);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.lgd-ownrent-compare .ownrent-col--own{
  border-color: rgba(var(--ms-accent-1-rgb),0.45);
  background: rgba(var(--ms-accent-1-rgb),0.06);
  box-shadow: 0 0 0 1px rgba(var(--ms-accent-1-rgb),0.15), 0 24px 60px -30px rgba(var(--ms-accent-1-rgb),0.55);
}
.lgd-ownrent-compare .ownrent-col__label{ color: var(--wp--preset--color--ms-accent-2); margin: 0; }
.lgd-ownrent-compare .ownrent-col--own .ownrent-col__label{ color: var(--wp--preset--color--ms-accent-1); }
.lgd-ownrent-compare .ownrent-col__title{ color: var(--wp--preset--color--ms-contrast); margin: 0.15em 0 var(--wp--preset--spacing--ms-30); }

.lgd-ownrent-compare .ownrent-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--ms-20); }
.lgd-ownrent-compare .ownrent-list li{
  position: relative; padding-left: 2.1em; line-height: 1.6;
  color: var(--wp--preset--color--ms-white-subtle);
  font-size: var(--wp--preset--font-size--ms-small);
}
.lgd-ownrent-compare .ownrent-list li::before{
  position: absolute; left: 0; top: 0.05em; font-weight: 900;
  width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.78em; line-height: 1;
}
.lgd-ownrent-compare .ownrent-list--rent li::before{ content: '\00D7'; color: #ff8a8a; background: rgba(255,80,80,0.12); }
.lgd-ownrent-compare .ownrent-list--own li::before{ content: '\2713'; color: var(--wp--preset--color--ms-contrast); background: rgba(var(--ms-accent-1-rgb),0.9); }
/* Stack the rent/own cards at 1024 to match the trade grids' tablet breakpoint.
   WP columns stay flex nowrap above 781px, so switch the flex axis to column
   rather than relying on flex-basis wrap. */
@media (max-width: 1024px){
  .lgd-ownrent-compare .ownrent-grid{ flex-direction: column; align-items: stretch; }
  .lgd-ownrent-compare .ownrent-grid > .wp-block-column{ flex-basis: auto !important; width: 100%; }
}

/* =====================================================================
   TRADE KEY FACTS — 4-point scannable summary strip placed atop trade
   landing pages, just under the hero (.lgd-trade-keyfacts).
   ===================================================================== */
.lgd-trade-keyfacts .tl-keyfacts-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--ms-30);
}
.lgd-trade-keyfacts .tl-keyfact{
  padding: var(--wp--preset--spacing--ms-30);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--wp--preset--color--ms-accent-1);
  background: rgba(255,255,255,0.02);
}
.lgd-trade-keyfacts .tl-keyfact-label{
  margin: 0 0 0.35em; color: var(--wp--preset--color--ms-accent-1);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.lgd-trade-keyfacts .tl-keyfact-value{
  margin: 0; color: var(--wp--preset--color--ms-contrast);
  font-weight: 600; line-height: 1.5;
}
/* 4-up only above 1024; 2-up through the tablet band (was 4-up down to 900,
   which crammed the long "Website, GBP, local SEO, and follow-up" value into
   ~200px cards on tablet/small-laptop). */
@media (max-width: 1024px){ .lgd-trade-keyfacts .tl-keyfacts-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lgd-trade-keyfacts .tl-keyfacts-grid{ grid-template-columns: 1fr; } }

/* Hero trades soft-fork link — routes trades (audience A) to who-we-work-with. */
.hero-trades-fork{ margin-top: var(--wp--preset--spacing--ms-20); }
.hero-trades-fork a{ color: var(--wp--preset--color--ms-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.hero-trades-fork a:hover{ color: var(--wp--preset--color--ms-accent-1); }

/* =====================================================================
   FOUNDER VIDEO — reserved slot (.lgd-miles-founder-video). Renders a 16:9
   frame; the wp:html slot holds the embed once recorded. Poster fallback
   uses Will's headshot until then.
   ===================================================================== */
.lgd-miles-founder-video .founder-video-frame{
  position: relative; width: 100%; max-width: 820px; margin: var(--wp--preset--spacing--ms-40) auto 0;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(var(--ms-accent-1-rgb),0.3);
  background: #000 center / cover no-repeat;
}
.lgd-miles-founder-video .founder-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lgd-miles-founder-video .founder-video-frame::after{
  content: attr(data-poster-note); position:absolute; left:0; right:0; bottom:0;
  padding: var(--wp--preset--spacing--ms-20); text-align:center;
  color: var(--wp--preset--color--ms-white-subtle); font-size: var(--wp--preset--font-size--ms-small);
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.lgd-miles-founder-video .founder-video-frame.has-embed::after{ content: none; }

/* Testimonial quote cards */
.lgd-trade-quotes .tl-quote{ position: relative; }
.lgd-trade-quotes .tl-quote::before{
  content: '\201C'; position: absolute; top: -0.2em; left: 0.1em;
  font-family: var(--wp--preset--font-family--big-shoulders-display);
  font-size: 5rem; line-height: 1; color: rgba(var(--ms-accent-1-rgb),0.35); pointer-events: none;
}
.lgd-trade-quotes .tl-quote-text{ font-size: var(--wp--preset--font-size--ms-lg); line-height: 1.6; }
.lgd-trade-quotes .tl-quote-name{ font-weight: 800; color: var(--wp--preset--color--ms-contrast); margin-top: var(--wp--preset--spacing--ms-20); }
.lgd-trade-quotes .tl-quote-role{ font-size: var(--wp--preset--font-size--ms-small); color: var(--wp--preset--color--ms-accent-1); }

/* =====================================================================
   WHO WE WORK WITH (.lgd-miles-wwww-*) — Miles-native page sections
   Hero reuses the global .hero-systems node-graph; fit cards and the
   two-audience split reuse the hairline-grid + radial-glow language of
   .lgd-miles-foundation. Tokens only, so a rebrand propagates.
   ===================================================================== */

/* ===== lgd-miles-wwww-hero ===== */
.lgd-miles-wwww-hero{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Layered brand glows — pink upper-right, cyan left, pink lower — sit
   below the animated systems graph (.hero-systems z-1) and content (z-2). */
.lgd-miles-wwww-hero::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 65% at 82% 22%, rgba(var(--ms-accent-1-rgb), 0.26) 0%, transparent 58%),
		radial-gradient(ellipse 58% 64% at 8% 34%, rgba(var(--ms-cyan-rgb), 0.18) 0%, transparent 55%),
		radial-gradient(ellipse 60% 60% at 42% 108%, rgba(var(--ms-accent-1-rgb), 0.14) 0%, transparent 55%);
}

.lgd-miles-wwww-hero .wwww-hero-inner{
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
	margin: 0 auto;
}

.lgd-miles-wwww-hero .wwww-hero-inner > * + *{
	margin-top: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-wwww-hero .wwww-hero-title{
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	font-size: clamp(2.9rem, 7.5vw, 6.25rem);
	letter-spacing: 0;
	max-width: 15ch;
	margin-top: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-wwww-hero .wwww-hero-title .hl-1,
.lgd-miles-wwww-hero .wwww-hero-title .hl-2{
	display: block;
}

.lgd-miles-wwww-hero .wwww-hero-rule{
	border: 0;
	height: 2px;
	width: 64px;
	max-width: 64px;
	margin: var(--wp--preset--spacing--ms-30) 0;
	background: linear-gradient(90deg, var(--wp--preset--color--ms-accent-1), rgba(var(--ms-accent-1-rgb), 0.2));
	opacity: 1;
}

.lgd-miles-wwww-hero .wwww-hero-tagline{
	max-width: 24ch;
	color: var(--wp--preset--color--ms-contrast);
}

.lgd-miles-wwww-hero .wwww-hero-body{
	max-width: 620px;
}

.lgd-miles-wwww-hero .wp-block-buttons{
	margin-top: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-wwww-hero .hero-cta-price{
	margin-top: var(--wp--preset--spacing--ms-20);
}

/* ===== lgd-miles-wwww-filter ===== */
.lgd-miles-wwww-filter{
	position: relative;
}

.lgd-miles-wwww-filter::before{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 88% 12%, rgba(var(--ms-accent-1-rgb), 0.05) 0%, transparent 55%);
}

.lgd-miles-wwww-filter .filter-inner{
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-wwww-filter .filter-header{
	max-width: 820px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-wwww-filter .filter-title,
.lgd-miles-wwww-filter .filter-lede{
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-wwww-filter .filter-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-wwww-filter .filter-card{
	background: var(--wp--preset--color--ms-base);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	position: relative;
	overflow: hidden;
	transition: background 0.4s ease, transform 0.25s ease;
}

.lgd-miles-wwww-filter .filter-card::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%), radial-gradient(ellipse at 20% 12%, rgba(var(--ms-accent-1-rgb), 0.08) 0%, transparent 48%);
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.lgd-miles-wwww-filter .filter-card > *{
	position: relative;
	z-index: 1;
}

.lgd-miles-wwww-filter .filter-card:hover{
	background: var(--wp--preset--color--ms-accent-4);
	transform: translateY(-2px);
}

.lgd-miles-wwww-filter .filter-card:hover::before{
	opacity: 1;
}

.lgd-miles-wwww-filter .filter-card-icon{
	width: 40px;
	height: 40px;
	color: rgb(var(--ms-cyan-rgb));
	transition: color 0.3s ease, transform 0.3s ease;
}

.lgd-miles-wwww-filter .filter-card-icon svg{
	width: 100%;
	height: 100%;
	display: block;
}

.lgd-miles-wwww-filter .filter-card:hover .filter-card-icon{
	color: var(--wp--preset--color--ms-accent-1);
	transform: translateY(-2px);
}

.lgd-miles-wwww-filter .filter-index{
	color: var(--wp--preset--color--ms-accent-1);
	margin: 0;
}

.lgd-miles-wwww-filter .filter-card-title{
	margin: 0;
}

.lgd-miles-wwww-filter .filter-card-copy{
	margin: 0;
}

/* ===== lgd-miles-wwww-audiences ===== */
.lgd-miles-wwww-audiences{
	position: relative;
	background: var(--wp--preset--color--ms-base-3);
}

.lgd-miles-wwww-audiences::before{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 10% 100%, rgba(var(--ms-cyan-rgb), 0.05) 0%, transparent 55%);
}

.lgd-miles-wwww-audiences .aud-inner{
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-wwww-audiences .aud-header{
	max-width: 820px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-wwww-audiences .aud-title,
.lgd-miles-wwww-audiences .aud-lede{
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-wwww-audiences .aud-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-wwww-audiences .aud-panel{
	background: var(--wp--preset--color--ms-base-3);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	position: relative;
	overflow: hidden;
	transition: background 0.4s ease;
}

/* Track accent: a crisp top rule, cyan for trades, pink for growing. */
.lgd-miles-wwww-audiences .aud-panel--trades{
	box-shadow: inset 0 3px 0 rgb(var(--ms-cyan-rgb));
}

.lgd-miles-wwww-audiences .aud-panel--growing{
	box-shadow: inset 0 3px 0 var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-wwww-audiences .aud-panel:hover{
	background: var(--wp--preset--color--ms-accent-4);
}

.lgd-miles-wwww-audiences .aud-panel-icon{
	width: 48px;
	height: 48px;
}

.lgd-miles-wwww-audiences .aud-panel-icon svg{
	width: 100%;
	height: 100%;
	display: block;
}

.lgd-miles-wwww-audiences .aud-panel--trades .aud-panel-icon,
.lgd-miles-wwww-audiences .aud-panel--trades .aud-panel-label{
	color: rgb(var(--ms-cyan-rgb));
}

.lgd-miles-wwww-audiences .aud-panel--growing .aud-panel-icon,
.lgd-miles-wwww-audiences .aud-panel--growing .aud-panel-label{
	color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-wwww-audiences .aud-panel-title,
.lgd-miles-wwww-audiences .aud-panel-copy{
	margin: 0;
}

.lgd-miles-wwww-audiences .aud-list{
	list-style: none;
	margin: var(--wp--preset--spacing--ms-20) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-wwww-audiences .aud-list li{
	position: relative;
	padding-left: var(--wp--preset--spacing--ms-40);
	color: var(--wp--preset--color--ms-white-subtle);
	line-height: 1.6;
}

.lgd-miles-wwww-audiences .aud-list li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 2px;
}

.lgd-miles-wwww-audiences .aud-panel--trades .aud-list li::before{
	background: rgb(var(--ms-cyan-rgb));
}

.lgd-miles-wwww-audiences .aud-panel--growing .aud-list li::before{
	background: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-wwww-audiences .aud-list li strong{
	color: var(--wp--preset--color--ms-contrast);
	font-weight: 600;
}

/* ===== WWWW responsive ===== */
@media (max-width: 1024px){
	.lgd-miles-wwww-filter .filter-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lgd-miles-wwww-audiences .aud-grid{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px){
	.lgd-miles-wwww-filter .filter-grid{
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   PORTFOLIO (.lgd-miles-portfolio-*) — Miles-native page sections
   Hero reuses the global .hero-systems node-graph + the glow language of
   .lgd-miles-wwww-hero. Case cards and the stat tiles reuse the
   hairline-frame + radial-glow idiom (1px gap over an ms-accent-3 bg
   reads as the divider). Tokens only, so a rebrand propagates.
   ===================================================================== */

/* ===== lgd-miles-portfolio-hero ===== */
.lgd-miles-portfolio-hero{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lgd-miles-portfolio-hero::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 65% at 82% 22%, rgba(var(--ms-accent-1-rgb), 0.26) 0%, transparent 58%),
		radial-gradient(ellipse 58% 64% at 8% 34%, rgba(var(--ms-cyan-rgb), 0.18) 0%, transparent 55%),
		radial-gradient(ellipse 60% 60% at 42% 108%, rgba(var(--ms-accent-1-rgb), 0.14) 0%, transparent 55%);
}

.lgd-miles-portfolio-hero .portfolio-hero-inner{
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
	margin: 0 auto;
}

.lgd-miles-portfolio-hero .portfolio-hero-inner > * + *{
	margin-top: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-portfolio-hero .portfolio-hero-title{
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	font-size: clamp(2.9rem, 7.5vw, 6.25rem);
	letter-spacing: 0;
	max-width: 16ch;
	margin-top: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-portfolio-hero .portfolio-hero-title .hl-1,
.lgd-miles-portfolio-hero .portfolio-hero-title .hl-2{
	display: block;
}

.lgd-miles-portfolio-hero .portfolio-hero-rule{
	border: 0;
	height: 2px;
	width: 64px;
	max-width: 64px;
	margin: var(--wp--preset--spacing--ms-30) 0;
	background: linear-gradient(90deg, var(--wp--preset--color--ms-accent-1), rgba(var(--ms-accent-1-rgb), 0.2));
	opacity: 1;
}

.lgd-miles-portfolio-hero .portfolio-hero-tagline{
	max-width: 26ch;
	color: var(--wp--preset--color--ms-contrast);
}

.lgd-miles-portfolio-hero .portfolio-hero-body{
	max-width: 620px;
}

.lgd-miles-portfolio-hero .wp-block-buttons{
	margin-top: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-portfolio-hero .hero-cta-price{
	margin-top: var(--wp--preset--spacing--ms-20);
}

/* ===== lgd-miles-portfolio-cases ===== */
.lgd-miles-portfolio-cases{
	position: relative;
}

.lgd-miles-portfolio-cases::before{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 12% 8%, rgba(var(--ms-cyan-rgb), 0.05) 0%, transparent 55%);
}

.lgd-miles-portfolio-cases .cases-inner{
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-portfolio-cases .cases-header{
	max-width: 820px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-portfolio-cases .cases-title,
.lgd-miles-portfolio-cases .cases-lede{
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-portfolio-cases .cases-list{
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--ms-40);
}

/* Two-panel card; the 1px grid gap over an ms-accent-3 bg becomes the
   divider between media and body (same trick as the fit-filter grid). */
.lgd-miles-portfolio-cases .case-card{
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
	overflow: hidden;
}

/* Alternate the media panel to the opposite side on even cards. */
.lgd-miles-portfolio-cases .case-card:nth-child(even){
	grid-template-columns: 1.1fr 0.9fr;
}

.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-media{
	order: 1;
}

.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-body{
	order: 0;
}

.lgd-miles-portfolio-cases .case-media{
	background: var(--wp--preset--color--ms-base);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--ms-20);
	min-height: 260px;
	box-shadow: inset 0 3px 0 rgb(var(--ms-cyan-rgb));
}

.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-media{
	box-shadow: inset 0 3px 0 var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-portfolio-cases .case-media > *{
	position: relative;
	z-index: 1;
	margin: 0;
}

.lgd-miles-portfolio-cases .case-media-art{
	position: absolute;
	right: -18px;
	bottom: -18px;
	width: 180px;
	height: 180px;
	z-index: 0;
	color: rgb(var(--ms-cyan-rgb));
	opacity: 0.16;
}

/* Real screenshot of the build, for cases whose site is live and still ours.
   Cards without one keep the .case-media-art watermark above. */
.lgd-miles-portfolio-cases .case-shot{
	margin: 0;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
	background: var(--wp--preset--color--ms-base-3);
}

.lgd-miles-portfolio-cases .case-shot img{
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
}

.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-media-art{
	color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-portfolio-cases .case-media-art svg{
	width: 100%;
	height: 100%;
	display: block;
}

.lgd-miles-portfolio-cases .case-quote{
	color: var(--wp--preset--color--ms-contrast);
	max-width: 32ch;
}

.lgd-miles-portfolio-cases .case-cite{
	color: rgb(var(--ms-cyan-rgb));
	max-width: 32ch;
}

.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-cite{
	color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-portfolio-cases .case-body{
	background: var(--wp--preset--color--ms-base-3);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-portfolio-cases .case-eyebrow{
	color: rgb(var(--ms-cyan-rgb));
	margin: 0;
}

.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-eyebrow{
	color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-portfolio-cases .case-title{
	margin: 0;
	max-width: 22ch;
}

.lgd-miles-portfolio-cases .case-copy{
	margin: 0;
	max-width: 54ch;
}

.lgd-miles-portfolio-cases .case-tags{
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-portfolio-cases .case-tags span{
	border: 1px solid var(--wp--preset--color--ms-accent-3);
	border-radius: 100px;
	padding: 0.35em 0.95em;
	color: var(--wp--preset--color--ms-white-subtle);
	line-height: 1;
	white-space: nowrap;
}

/* ===== lgd-miles-portfolio-proof ===== */
.lgd-miles-portfolio-proof{
	position: relative;
}

.lgd-miles-portfolio-proof::before{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 15% 12%, rgba(var(--ms-accent-1-rgb), 0.05) 0%, transparent 55%);
}

.lgd-miles-portfolio-proof .proof-inner{
	max-width: 1040px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-portfolio-proof .proof-quote-wrap{
	max-width: 900px;
	margin: 0 auto var(--wp--preset--spacing--ms-60);
	text-align: center;
}

.lgd-miles-portfolio-proof .proof-mark{
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	font-size: 4.5rem;
	margin: 0 0 -0.35em;
}

.lgd-miles-portfolio-proof .proof-quote{
	margin: 0 auto;
}

.lgd-miles-portfolio-proof .proof-attribution{
	margin-top: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-portfolio-proof .proof-stats{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-portfolio-proof .proof-stat{
	background: var(--wp--preset--color--ms-base);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-portfolio-proof .proof-stat-num{
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin: 0;
	color: rgb(var(--ms-cyan-rgb));
}

.lgd-miles-portfolio-proof .proof-stat:nth-child(even) .proof-stat-num{
	color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-portfolio-proof .proof-stat-label{
	margin: 0;
	max-width: 22ch;
}

/* ===== lgd-miles-portfolio-projects ===== */
.lgd-miles-portfolio-projects{
	position: relative;
}

.lgd-miles-portfolio-projects::before{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 86% 10%, rgba(var(--ms-accent-1-rgb), 0.05) 0%, transparent 55%);
}

.lgd-miles-portfolio-projects .projects-inner{
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-portfolio-projects .projects-header{
	max-width: 820px;
	margin-bottom: var(--wp--preset--spacing--ms-60);
}

.lgd-miles-portfolio-projects .projects-title,
.lgd-miles-portfolio-projects .projects-lede{
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-portfolio-projects .projects-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

/* Cards sit one step lighter than the section so they read as raised, but stay
   dark enough for the pink .proj-metric to clear AA. ms-base-2 (#333) put pink
   at 3.40:1. */
.lgd-miles-portfolio-projects .proj-card{
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--ms-accent-3);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
	min-height: 240px;
	position: relative;
	overflow: hidden;
	transition: background 0.4s ease, transform 0.25s ease;
}

.lgd-miles-portfolio-projects .proj-card::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%), radial-gradient(ellipse at 18% 10%, rgba(var(--ms-cyan-rgb), 0.08) 0%, transparent 48%);
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.lgd-miles-portfolio-projects .proj-card > *{
	position: relative;
	z-index: 1;
}

/* Faint typographic monogram, bottom-right, behind the copy. Anchors each card
   so it reads as finished, not floating. Type only (big-shoulders), so it can
   never be mistaken for a client logo. Mirrors the .case-media-art watermark
   language used on the case-study cards. */
.lgd-miles-portfolio-projects .proj-card-art{
	position: absolute;
	right: var(--wp--preset--spacing--ms-40);
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--big-shoulders-display), sans-serif;
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ms-contrast);
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--ms-40));
	overflow: hidden;
}

.lgd-miles-portfolio-projects .proj-card:hover{
	background: var(--wp--preset--color--ms-accent-4);
	transform: translateY(-2px);
}

.lgd-miles-portfolio-projects .proj-card:hover::before{
	opacity: 1;
}

.lgd-miles-portfolio-projects .proj-eyebrow{
	color: rgb(var(--ms-cyan-rgb));
	margin: 0;
}

.lgd-miles-portfolio-projects .proj-name{
	margin: 0;
}

.lgd-miles-portfolio-projects .proj-copy{
	margin: 0;
}

/* Result pinned to the card foot, set off by a hairline — so metrics line
   up across a ragged grid of copy lengths. */
.lgd-miles-portfolio-projects .proj-metric{
	color: var(--wp--preset--color--ms-accent-1);
	margin: var(--wp--preset--spacing--ms-30) 0 0;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--ms-20);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== lgd-miles-portfolio-track ===== */
.lgd-miles-portfolio-track{
	position: relative;
}

.lgd-miles-portfolio-track::before{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 0%, rgba(var(--ms-cyan-rgb), 0.05) 0%, transparent 55%);
}

.lgd-miles-portfolio-track .track-inner{
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.lgd-miles-portfolio-track .track-header{
	max-width: 900px;
	margin-bottom: var(--wp--preset--spacing--ms-50);
}

.lgd-miles-portfolio-track .track-title,
.lgd-miles-portfolio-track .track-lede{
	margin-bottom: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-portfolio-track .track-stats{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--ms-accent-3);
	border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-portfolio-track .track-stat{
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--ms-20);
	background: var(--wp--preset--color--ms-base);
	padding: var(--wp--preset--spacing--ms-50) var(--wp--preset--spacing--ms-40);
}

.lgd-miles-portfolio-track .track-num{
	font-size: clamp(2.2rem, 4.5vw, 3.5rem);
	margin: 0;
	color: rgb(var(--ms-cyan-rgb));
}

.lgd-miles-portfolio-track .track-stat:nth-child(even) .track-num{
	color: var(--wp--preset--color--ms-accent-1);
}

.lgd-miles-portfolio-track .track-label{
	margin: 0;
	max-width: 20ch;
}

/* ===== Portfolio responsive ===== */
@media (max-width: 1024px){
	.lgd-miles-portfolio-projects .projects-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lgd-miles-portfolio-track .track-stats{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px){
	.lgd-miles-portfolio-track .track-stats{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px){
	.lgd-miles-portfolio-projects .projects-grid{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px){
	.lgd-miles-portfolio-cases .case-card,
	.lgd-miles-portfolio-cases .case-card:nth-child(even){
		grid-template-columns: 1fr;
	}
	.lgd-miles-portfolio-cases .case-card .case-media,
	.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-media{
		order: 0;
		min-height: 200px;
	}
	.lgd-miles-portfolio-cases .case-card .case-body,
	.lgd-miles-portfolio-cases .case-card:nth-child(even) .case-body{
		order: 1;
	}
}

@media (max-width: 768px){
	/* Collapse the 3-up proof stats at 768 (was 700) so they don't cram to
	   ~170px cards in the 701-768 tablet range while sibling stat grids are 2-up. */
	.lgd-miles-portfolio-proof .proof-stats{
		grid-template-columns: 1fr;
	}
}

/* Hero trust badges (under CTA) */
.lgd-miles-hero .hero-trust-badges{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--ms-30);
  margin-top: var(--wp--preset--spacing--ms-30);
}

.lgd-miles-hero .hero-trust-badge{
  opacity: 0.7;
  white-space: nowrap;
}

@media (max-width: 600px){
  .lgd-miles-hero .hero-trust-badges{
    gap: var(--wp--preset--spacing--ms-20);
  }

  .lgd-miles-hero .hero-trust-badges .hero-client-dot{
    display: none;
  }
}

/* About: who-does-the-work person cards */
.lgd-miles-about .about-people{
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--ms-40);
  margin-top: var(--wp--preset--spacing--ms-30);
  margin-bottom: var(--wp--preset--spacing--ms-40);
}

.lgd-miles-about .about-person{
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--ms-20);
}

.lgd-miles-about .about-person img{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  border: 1px solid var(--wp--preset--color--ms-accent-3);
}

.lgd-miles-about .about-person .nm{
  font-weight: 800;
  color: var(--wp--preset--color--ms-contrast);
  line-height: 1.1;
}

.lgd-miles-about .about-person .rl{
  font-size: var(--wp--preset--font-size--ms-small);
  color: var(--wp--preset--color--ms-accent-2);
}