/* ----- HERO SECTION (toolset) ----- */

.hero--meta {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 48px;
    border-top: 1px solid var(--sheet-line);
    padding: 40px 0px 34px 0px;
}

.meta-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  	flex-direction: column;
}

.meta-f {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-f .tag {
    border: 1px solid var(--border-alt);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hero--meta .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hero--meta h2 {
    padding-right: 5em;
	padding-top: 4px;
    font-weight: 340 !important;
}

sup.sup-value {
    font-size: .42em;
    letter-spacing: 0;
    vertical-align: .45em;
    margin-left: 2px;
}

div#wpv-view-layout-1766 .row {
    padding: 108px 0 46px 0;
}

.col-md-12 {
    display: flex;
    flex-direction: column;
}

.hero--outcome {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  	width: 100%;
    gap: 24px;
    flex-direction: row;
  	margin-top: 4px;
}

.hero-titles {
    display: flex;
    align-items: center;
    flex-direction: column;
  	text-align: center;
    gap: 18px;
}

.hero--info {
    display: flex;
    flex-direction: column;
  	width: 82%;
    gap: 16px;  
}

.m17y-1.x-section {
    padding-top: 20px;
  	padding-bottom: 32px;
}

.hero--bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  	gap: 3em;
	padding: inherit 2vw;
}

.hero--area {
    display: flex;
    flex-direction: row;
  	justify-content: space-between;
  	margin: auto;
  	padding: 72px 64px;
    gap: 3em;
}

.hero--area .col-1 {
    max-width: 1140px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}

.work-attributes {
    display: flex;
    border: 0.5px solid var(--border-alt);
    border-radius: 10px;
    width: auto;
  	margin-top: 6px;
    padding: 2px;
    flex-direction: row;
    gap: 4px;
  	color: var(--text-alt);
}

.work-attributes--inner {
    display: flex;
    background-color: var(--background-alt);
    flex-direction: row;
    border-radius: 8px;
    gap: 8px;
    padding: 6px 8px;
}

.hero--breadcrumb {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 14px;
}

.hero--breadcrumb .tag {
    color: var(--text-alt);
}

.hero--inner-breadcrumb {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 24px;
  	margin-left: 2px;
  	max-width: 128px;
}

.hero--inner-breadcrumb svg {
    max-height: 40px;
  	width: auto;
}

.back-work {
    display: flex;
    gap: 4px;
    align-items: center;
    background-color: var(--background-alt);
    padding: 4px;
    border-radius: 32px;
    color: var(--text-alt);
}

.hero--info h1 {
    font-size: 80px !important;
    line-height: 112% !important;
}

.hero--area .body-large {
    font-weight: 400 !important;
  	font-size: 18px !important;
}

/* Outcome */

.hero--area .work-outcome > div {
    display: flex;
    gap: 0.6%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.work-outcome {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
	width: 100%;
}

.work-outcome-item {
    display: flex;
    color: var(--text-main);
    border-top: 0.5px solid var(--border-alt);
	border-bottom: 0.5px solid var(--border-alt);
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 36px 34px;
    gap: 16px;
}

.work-outcome-item:first-of-type {
    padding-left: 0px;
}

.work-outcome-item:nth-child(n+2) {
    border-left: 0.5px solid var(--border-alt);
}

.outcome-text {
	color: var(--text-alt);
}

.project-taxonomy svg {
    max-width: 18px;
    stroke-width: 2px;
}

.hero--area .work-outcome h5 {
  font-size: inherit;
  color: inherit;
  font-weight: 500;
}

.work-outcome .js-wpv-view-layout {
    display: flex;
    width: 100%;
}

.hero--outcome img, .hero--outcome svg {
    max-width: 24px;
    height: auto;
    border: none;
}

.hero--outcome svg * {
  	fill: var(--text-main)
}


/* =========================================================
   Animation
   ========================================================= */

/* ---------- Client colour, one per theme ---------- */
/* --client-dark / --client-light come from the <style> in the Toolset template */
:root { --case-accent: var(--client-dark); }
.light-mode { --case-accent: var(--client-light); }

.outcome-data .sup-value { color: var(--case-accent, currentColor); }

/* ---------- Entrance ---------- */
html.js .hero--breadcrumb,
html.js .hero-titles h1,
html.js .work-outcome-item,
html.js .hero--meta { opacity: 0; animation: smFailsafe 0s 2.5s forwards; }
@keyframes smFailsafe { to { opacity: 1; } }

.sm-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sm-w > span { display: inline-block; will-change: transform; }

/* ---------- Aura behind the outcomes ---------- */
.hero--bottom { position: relative; isolation: isolate; }
.sm-aura {
  position: absolute;
  inset: -25% -5% -35%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 50%, #000 30%, transparent 75%);
          mask-image: radial-gradient(60% 55% at 50% 50%, #000 30%, transparent 75%);
  opacity: 0;
  animation: smGlow 1.8s 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.sm-aura i {
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
  will-change: transform;
}
.sm-aura i:nth-child(1) { left: 14%; top: 22%; background: var(--case-accent); }
.sm-aura i:nth-child(2) { left: 40%; top: 34%; background: color-mix(in oklch, var(--case-accent) 45%, #60a5fa); }
.sm-aura i:nth-child(3) { left: 60%; top: 14%; background: color-mix(in oklch, var(--case-accent) 35%, #e879f9); }
.light-mode .sm-aura i { opacity: .38; }
@keyframes smGlow { to { opacity: 1; } }

/* ---------- Cursor in client colour ---------- */
html body, html .light-mode, html .dark-mode { --cursor-color: var(--case-accent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .hero--breadcrumb,
  html.js .hero-titles h1,
  html.js .work-outcome-item,
  html.js .hero--meta { opacity: 1; animation: none; }
  .sm-aura { animation: none; opacity: 1; }
}

@media only screen and (max-width: 979px) {
  	.hero--area {
        padding: 32px 64px;
    }
    .hero--bottom {
    	flex-direction: column;
      	gap: 24px;
	}
  	.hero--bottom .col-1 {
    	width: 100%;
    	max-width: 100%;
	}
  	.hero--top h1 {
    	font-size: 44px !important;
	}
  	.hero--area .body-large {
    	font-size: 22px !important;
	}
  	.index-acc .x-accordion-toggle {
    	padding: 10px 15px !important;
	}
  	.index-acc i {
    	display: inline-flex;
	}
  	.index-acc .x-accordion-group {
    	border: 1px solid var(--border-alt);
    	background: transparent;
    	border-radius: 10px;
    	box-shadow: none;
    	margin-top: 6px;
    	overflow: hidden;
	}
  	.index-acc .x-accordion-body {
    	border: none;
    	margin-top: 0;
	}
}

@media only screen and (max-width: 760px) {
  	div#wpv-view-layout-1766 .row {
        padding: 88px 0 46px 0;
    }
    .hero--area {
        padding: 32px 8px;
    }
    .hero--inner-breadcrumb svg {
        max-height: 30px;
    }
  	.hero--inner-breadcrumb {
    	display: flex;
    	flex-wrap: wrap;
    	align-items: center;
  	}
	.hero--bottom .col-2 {
    	width: 100%;
	}
  	.hero--outcome {
        margin-top: 3px;
        overflow: scroll;
        max-width: 100%;
        padding-bottom: 10px;
    }
  	.hero-titles {
    	gap: 16px;
	}
  	.hero--top {
    	gap: 20px !important;
	}
	.hero--meta {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .hero--meta h2 {
        font-size: 19px !important;
        padding: 0;
    }
    .meta-f .tag {
        font-size: 12px;
        padding: 4px 8px;
    }
    .meta-fields {
        gap: 12px;
    }
    .work-outcome-item {
        padding: 14px 24px 18px !important;
    }
    /* 2 on top, 1 below */
  .work-outcome > .js-wpv-view-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
	
	/* second value: divider on the left, a little air */
  .work-outcome-item {
    padding: 14px 12px !important;
  }

  .work-outcome-item:first-child {
    padding-left: 6px !important;
  }
  .work-outcome-item:last-child {
    padding-right: 6px !important;
  }

  /* numbers sized for half the screen */
  .work-outcome .outcome-data {
    font-size: clamp(44px, 13vw, 64px);
  }
}



/* PAGE FIX */

main.x-layout.x-layout-single { /* margin-bottom on footer */
    background: var(--background);
    z-index: 2;
    position: relative;
}

.width-limit .x-row.x-container {
  	max-width: 1352px;
	margin-left: auto;
    margin-right: auto;
}

.menu-item-1057 .m3g-k.x-anchor {
    background-color: var(--border-primary);
}

/**/

.js--model {
    max-width: 420px;
}

svg.bg-line {
    position: absolute;
    top: 50%;
    left: 0px;
    z-index: 5;
}

.bg-line path {
    stroke: red;
}

/* TEXT SECTIONS */

.padding-wide {
	padding: 8rem 2vw 8rem 2vw !important;
}

.p-title {
  padding-top: 8px;
}

.subp-title {
  padding-bottom: 12px;
}

.subp-text {
  margin-bottom: 20px;
}

.p-column div:last-of-type .subp-text {
  margin-bottom: 0px;
}

.p-column li * {
  margin-bottom: 0.8vh;
}

iframe { /* VIMEO LENIS SCROLL FIX */
  pointer-events:none;
}

/* Media Query */

@media only screen and (max-width: 979px) {
  .padding-wide {
		padding: 4.4rem 2vw !important;
	}
  .p-title:nth-child(2) {
  padding-bottom: 16px;
  }
}

@media only screen and (max-width: 767px) {
  
}