/*
Theme Name: Public London
Theme URI: https://www.public.london/
DESCRIPTION: Public Lonodn custom Wordpress theme
Version: 1.0
Author: Tonya Lawrence / tjldesigns.com
Author URI: https://tjldesigns.com
Tags: Public London
*/

/** reset **/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{border:0;outline: none;font-size:100%;font:inherit;background: transparent; vertical-align:baseline;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1; -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:''; content:none;}
table{border-collapse:collapse;border-spacing:0}

/**

@font-face {
    font-family: 'Financier';
    src: url('/wp-content/themes/exagen/fonts/financier-display-web-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Financier';
    src: url('/wp-content/themes/exagen/fonts/financier-display-web-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Financier';
    src: url('/wp-content/themes/exagen/fonts/financier-display-web-semibold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

**/

/** Aeonik - self-hosted in this theme's /fonts/ folder.
    woff2 first (~35KB each), original .ttf kept as a fallback (~97KB each).
    Paths are relative to this stylesheet. **/

@font-face {
    font-family: 'Aeonik';
    src: url('fonts/aeonik-light.woff2') format('woff2'),
         url('fonts/63cfbbd1f1ef1aac9d955d8d_Aeonik-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aeonik';
    src: url('fonts/aeonik-regular.woff2') format('woff2'),
         url('fonts/63cfbbb77112a9dfa21ca6fa_Aeonik-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aeonik';
    src: url('fonts/aeonik-medium.woff2') format('woff2'),
         url('fonts/63cfbbc799c76225f123942f_Aeonik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aeonik';
    src: url('fonts/aeonik-bold.woff2') format('woff2'),
         url('fonts/63cfbbd8ef79b3196f942a90_Aeonik-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --aeonik: 'Aeonik', Arial, Helvetica, sans-serif;
    /**
  --grey: #4D4D4D;
  --grey-bkg: #F5F5F4;
  --purple: #301D41;
  --cian: #45C2CC;
  --yellow: #FABD30;
  --stolzl:"stolzl", sans-serif;
  **/
}

/**
color:var(--yellow)
font-family:var(--alderwood)
background-color:var(--dark-greenop)
**/

/* general */

@view-transition {navigation: auto;}

#overall-wrapper { overflow:hidden; }
#overall-wrapper.noscroll { /** height: 100vh; **/ overflow: hidden; }
html.noscroll, html.noscroll body { overflow: hidden; position: relative; /** height: 100%; **/ }

html,body { /** overflow-x: hidden; **/   -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { /** overflow-y: scroll; **/  overflow-y: scroll; }

body::-webkit-scrollbar, body *::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background-color: var(--cian); }
body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--grey-bkg); }
body *::-webkit-scrollbar { width: 5px; }

/** below copied to wp-admin.css - START **/

body { font: 400 16px/26px var(--aeonik); background: #fff; color: var(--grey); }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;        text-underline-offset: 3px; }
img, canvas, figure { max-width: 100%; height: auto; }

strong { font-weight: bold; }
em { font-style: italic; }

h1, h2, h3, h4, h5, h6, p { padding: 0 0 25px 0; }
h1, h2, h3, h4, h5, h6, .h1_styler, .h2_styler, .h3_styler {  }
h1, .h1_styler {  } 
h2, .h2_styler {  } 
h3, .h3_styler {  } 
h4 {  }
h5 {  }
p {  }
a { color: var(--grey); text-decoration: underline; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease;    -webkit-font-smoothing: antialiased; }
a:hover { text-decoration: none; }
	a[href^="tel:"] { text-decoration: none !important; cursor: default; }

ul, ol { margin: 0 0 0 14px; padding: 0 0 20px 0; }
ul { list-style: disc; margin: 0 0 0 20px; }
ol { list-style: decimal; margin: 0 0 0 18px; }
ul li, ol li { padding: 0 0 10px 0; margin: 0;  padding: 0 0 5px 0; }
ul ul { padding: 10px 0 0 0; }
ul ul li { padding: 0 0 10px 0; }

table { margin: 0 0 15px 0; }
table td, table th { padding: 10px 5px; }

hr {  }

::-moz-selection { background-color: var(--purple); color: #fff; }
::selection { background-color: var(--purple); color: #fff; }

.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

.large_text {  }
.button_cta { display:inline-block; font-size:16px; line-height:20px; padding:16px 35px; text-align:center; text-decoration: none; color:var(--purple); border: 2px solid var(--purple); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
.button_cta:hover { color:var(--cian); border-color:var(--cian); }
.button_cta.button_cta_small { font-size:14px; line-height:18px; }
.green_label {  }

/** below copied to wp-admin.css - END **/

/** general layout **/

.container { margin: 0 auto; width: 100%; padding: 0 40px; }
.container_capped { max-width:1374px; }

input, textarea { transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }

a.view-article { display: none; }

.clear { clear: both; }
.float_left, .alignleft { float: left; margin: 5px 35px 10px 0; }
.float_right, .alignright { float: right; margin: 5px 0 10px 35px; }
.no_padding { padding: 0; }

.embed-container { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; /* 16x9 Aspect Ratio */  max-width: 100%; height: auto; }
.embed-container-4x3 { padding-bottom: 75%; /* 4x3 Aspect Ratio */ }
.embed-container-square { padding-bottom: 100%; }
.embed-container-mobile { padding-bottom: 132%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
    .embed-container-wrapper { margin-top: 20px; margin-bottom: 40px; }

.disable_select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }

.pag_nav { display: block; clear: both; text-align: center; }
.pag_nav a { text-decoration: none; }

/** general form styles **/

form { margin: 0; }

input { outline: none !important; }
input, select, textarea { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; font: inherit; }
input.text, select, textarea,  .sf-field-search input { padding: 10px 15px; margin: 0; border: 1px solid #fff; outline: none; background-color: #fff;  }
select { /** min-height: 43px; padding: 0 10px; **/ }
label {  }
input.text, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

::-webkit-input-placeholder { color: #333F48 !important; }
:-moz-placeholder { /* Firefox 18- */ color: #333F48 !important; }
::-moz-placeholder {  /* Firefox 19+ */ color: #333F48 !important; }
:-ms-input-placeholder { color: #333F48 !important; }

/** contact form **/

.form_list { margin: 0 auto; padding: 0; list-style: none; list-style-image: none; /** max-width: 380px;  **/ }
.form_list li { margin: 0; padding: 0 0 19px 0; display: block; }
.form_list li label {  }
.form_list li .text, .form_list li textarea, .form_list li select { width: 100%; display: block; }
.form_list li .text.wpcf7-not-valid { border-color: #E30428 !important; }
.form_list li textarea { height: 120px; }
.form_list li.form_button { padding: 0; }
.form_list li.form_button input {  }

.form_list li select, .searchandfilter select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; background: url(/wp-content/themes/osbornes/images/arrow-down-select.png) 100% 50% no-repeat #fff; background-size: auto 9px; padding-right: 35px; }
.form_list li select::-ms-expand, .searchandfilter select::-ms-expand { display: none; }

.wpcf7-not-valid-tip { display: block; padding: 5px 0 0 0;  display: none !important; }
.wpcf7-not-valid-tip, .wpcf7-not-valid-tip * {  }
form.invalid .wpcf7-not-valid { /** background: #fbe122;  border: 1px solid #fbe122; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; **/ }

.wpcf7 form .wpcf7-response-output { clear: both; border: none; margin: 0; color: #269FC7; padding: 20px 0 0 0; text-align: left; font-weight: bold; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { color: #E10600; font-weight: bold; }

.form-hidden-fields { display: none !important; }
.ajax-loader { display: none !important; }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none;
    -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;  padding: 0; margin: 0; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;  padding: 0; margin: 0; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }

.slick-arrow { z-index: 10; z-index: 3; background: url(/wp-content/themes/exagen/images/scroller-left.svg) center no-repeat; background-size: 50px 50px; border: none; outline: none; text-indent: -9999px; width: 50px; height: 50px; cursor: pointer;  transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.slick-arrow:hover {  }
.slick-prev.slick-arrow {  }
.slick-next.slick-arrow { background-image: url(/wp-content/themes/exagen/images/scroller-right.svg); }
.slick-prev.slick-arrow.slick-disabled { background-image: url(/wp-content/themes/exagen/images/scroller-left-inactive.svg); }
.slick-next.slick-arrow.slick-disabled { background-image: url(/wp-content/themes/exagen/images/scroller-right-inactive.svg); }

.slick-dots { margin: 0; padding: 35px 0 0 0; list-style: none; list-style-image: none; display:flex; align-items:center; justify-content:center; gap: 0 14px; }
.slick-dots li { margin: 0; padding: 0 !important; width: auto !important; float: none !important; }
.slick-dots li button { cursor: pointer; background: rgba(255,255,255,0.3); text-indent: -9999px; outline: none; border: none; padding: 0; width: 10px; height: 10px; line-height: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; }
.slick-dots li button:hover, .slick-dots li.slick-active button { background: var(--cian); }


.wobble { -webkit-animation: wobble 2.5s ease-out; -webkit-animation-iteration-count: infinite; }
@-webkit-keyframes wobble {
    0% {-webkit-transform: translate3d(0, 0, 0); }
    50% {-webkit-transform: translate3d(0, -10px, 0); }
    100% {-webkit-transform: translate3d(0, 0, 0); }    
}

    .hamburger { padding: 0; display: flex; gap: 0 10px; align-items: center; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; }
    .hamburger:hover { /** opacity: 0.7; **/ }
    .hamburger.is-active {  }

    .hamburger-box { width: 26px; height: 11px; top: 1px; display: inline-block; position: relative; }

    .hamburger-inner { display: block; top: 50%; top: 0; }
    .hamburger-inner, .hamburger-inner::after { width: 26px; height: 2px; background-color: #fff; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
    .hamburger-inner::after { content: ""; display: block; }
    .hamburger-inner::after { bottom: -8px; }

    .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .hamburger--spin.is-active .hamburger-inner::after { bottom: 0 !important; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

    .hamburger-label { color: #fff; font-size:17px; line-height: 17px; font-weight:400; font-weight:300; letter-spacing: -0.01em; }

/** header **/



@media all and (min-width: 0px) and (max-width : 1800px) {



}

@media all and (min-width: 0px) and (max-width : 1600px) {

}

@media all and (min-width: 0px) and (max-width : 1530px) {

}

@media all and (min-width: 0px) and (max-width : 1500px) {

}

@media all and (min-width: 0px) and (max-width : 1420px) {

}

@media all and (min-width: 0px) and (max-width : 1400px) {


}

@media all and (min-width: 0px) and (max-width : 1380px) {


}

@media all and (min-width: 0px) and (max-width : 1320px) {


}

@media all and (min-width: 0px) and (max-width : 1200px) {



}

@media all and (min-width: 0px) and (max-width : 1180px) {




}

@media all and (min-width: 0px) and (max-width : 1080px) {




}

@media all and (min-width: 0px) and (max-width : 1024px) {


}

@media all and (min-width: 0px) and (max-width : 980px) {



}

@media all and (min-width: 0px) and (max-width : 950px) {



}

@media all and (min-width: 0px) and (max-width : 900px) {


}

@media all and (min-width: 0px) and (max-width : 850px) {


}

@media all and (min-width: 0px) and (max-width : 800px) {


}

@media all and (min-width: 0px) and (max-width : 780px) {

}

@media all and (min-width: 0px) and (max-width : 760px) {



}

@media all and (min-width: 0px) and (max-width : 750px) {



}

/** mobile **/

@media all and (min-width: 0px) and (max-width : 670px) {

    body {  }

    h1, .h1_styler { }
    h2, .h2_styler {  }
    h3, .h3_styler {  }

    .container { padding: 0 25px; }

}

@media all and (min-width: 0px) and (max-width : 650px) {



}

@media all and (min-width: 0px) and (max-width : 620px) {



}

@media all and (min-width: 0px) and (max-width : 580px) {



}

@media all and (min-width: 0px) and (max-width : 540px) {



}

@media all and (min-width: 0px) and (max-width : 500px) {



}

@media all and (min-width: 0px) and (max-width : 470px) {



}

@media all and (min-width: 0px) and (max-width : 450px) {



}

@media all and (min-width: 0px) and (max-width : 400px) {


}

@media all and (min-width: 0px) and (max-width : 370px) {


}

@media all and (min-width: 0px) and (max-width : 360px) {

}

.grecaptcha-badge { visibility: hidden; }

/** ------------------------------------------------------------------
    Showcase slider (index.php / ACF repeater "showcase_slides")
    Full viewport - everything sits above the fold.

    Sizing is anchored to the 1920x1080 Figma frame and scales with vw,
    clamped so it never drops below a legible minimum on small screens.
    Confirmed from Figma: panel #D9D9D9, blue #0000F4, 29px frame padding,
    footer "Public" = Aeonik Bold 24px / 100% / -2% tracking.
   ------------------------------------------------------------------ **/

:root {
    --showcase-blue: #0000F4;
    --showcase-panel: #D9D9D9;
    --showcase-ink: #111111;
    --showcase-rule: #A8A8A8;
    --showcase-pad: clamp(14px, 1.51vw, 29px);
    --showcase-speed: 0.9s;
    --showcase-ease: cubic-bezier(0.65, 0.05, 0.15, 1);

    /* type scale - values in comments are the 1920px design sizes */
    --showcase-label: clamp(11px, 0.73vw, 14px);   /* 14px */
    --showcase-value: clamp(13px, 0.94vw, 18px);   /* 18px */
    --showcase-logo: clamp(17px, 1.25vw, 24px);    /* 24px */
    --showcase-final-logo: clamp(40px, 6.67vw, 128px); /* 128px */
    --showcase-final-head: clamp(31px, 5.1vw, 98px);   /* 98px */
    --showcase-col-heading: clamp(10px, 0.63vw, 12px); /* 12px */
    --showcase-col-body: clamp(13px, 0.94vw, 18px);    /* 18px */
}

/* lock the page so the slider is the only thing on screen */
html.showcase-active,
html.showcase-active body { height: 100%; overflow: hidden; }
html.showcase-active body { overscroll-behavior: none; }
html.showcase-active #overall-wrapper { height: 100%; }
html:has(.showcase), html:has(.showcase) body { overflow: hidden; }

.showcase { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; background: var(--showcase-panel); overflow: hidden; }

.showcase_viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }

.showcase_track { display: flex; width: 100%; height: 100%; transform: translate3d(calc(var(--showcase-index, 0) * -100%), 0, 0); transition: transform var(--showcase-speed) var(--showcase-ease); will-change: transform; }
.showcase_track.no-anim { transition: none; }

.showcase_slide { flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; }

/* No padding on the project panel - the banner bleeds to the top and both
   edges. The meta and footer rows carry their own horizontal padding. The
   final slide is all text, so it keeps padding all round. */
.showcase_panel { display: flex; flex-direction: column; height: 100%; background: var(--showcase-panel); padding: 0; overflow: hidden; }
.showcase_slide_final .showcase_panel { padding: var(--showcase-pad); }

/* --- next / loop arrow --- */

.showcase_next { flex: 0 0 auto; width: clamp(34px, 2.8vw, 54px); height: clamp(34px, 2.8vw, 54px); display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; margin: 0 0 0 auto; cursor: pointer; -webkit-appearance: none; appearance: none; }
.showcase_next_icon { display: block; width: clamp(11px, 0.9vw, 17px); height: clamp(11px, 0.9vw, 17px); border-top: 2px solid var(--showcase-ink); border-right: 2px solid var(--showcase-ink); transform: translateX(-3px) rotate(45deg); transition: transform .3s var(--showcase-ease); }
.showcase_next:hover .showcase_next_icon { transform: translateX(3px) rotate(45deg); }
.showcase_next:focus-visible { outline: 2px solid var(--showcase-blue); outline-offset: 2px; }

/* --- project slide --- */

.showcase_media { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.showcase_media picture { display: block; width: 100%; height: 100%; }
.showcase_media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }

.showcase_meta { display: flex; align-items: center; gap: 0 3vw; padding: clamp(14px, 1.4vw, 27px) var(--showcase-pad) 0 var(--showcase-pad); flex: 0 0 auto; }
.showcase_meta_item { display: flex; flex-direction: column; gap: 5px 0; min-width: 0; }
.showcase_meta_item:first-child { flex: 0 0 auto; min-width: 9.9vw; }
.showcase_meta_item_scope { flex: 1 1 auto; }
.showcase_meta_label { display: block; font-size: var(--showcase-label); line-height: 1.2; color: var(--showcase-blue); }
.showcase_meta_value { display: block; font-size: var(--showcase-value); line-height: 1.25; color: var(--showcase-ink); }

.showcase_foot { display: flex; align-items: center; justify-content: space-between; gap: 0 20px; flex: 0 0 auto; margin: clamp(14px, 1.4vw, 27px) var(--showcase-pad) 0 var(--showcase-pad); padding: clamp(10px, 0.9vw, 18px) 0 var(--showcase-pad) 0; border-top: 1px solid var(--showcase-rule); }
.showcase_foot_logo { font-size: var(--showcase-logo); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--showcase-blue); background: none; border: 0; padding: 0; margin: 0; font-family: inherit; -webkit-appearance: none; appearance: none; }
button.showcase_foot_logo { cursor: pointer; }
button.showcase_foot_logo:hover { opacity: 0.65; }
button.showcase_foot_logo:focus-visible { outline: 2px solid var(--showcase-blue); outline-offset: 3px; }
.showcase_foot_email { font-size: var(--showcase-label); line-height: 1.2; color: var(--showcase-ink); text-decoration: none; }
.showcase_foot_email:hover { text-decoration: underline; }

/* --- final (about) slide --- */

.showcase_slide_final .showcase_panel { justify-content: space-between; }

.showcase_final_top { display: flex; align-items: flex-start; gap: 0 3vw; flex: 1 1 auto; min-height: 0; padding: 0 0 clamp(14px, 1.4vw, 27px) 0; }
.showcase_final_intro { flex: 1 1 auto; min-width: 0; }
.showcase_final_top .showcase_next { align-self: center; }

.showcase_final_logo { font-size: var(--showcase-final-logo); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--showcase-blue); margin: 0; padding: 0 0 clamp(18px, 2.6vw, 50px) 0; }
.showcase_final_heading { font-size: var(--showcase-final-head); line-height: 0.86; font-weight: 400; letter-spacing: -0.02em; color: var(--showcase-blue); margin: 0; padding: 0; max-width: 9em; }

.showcase_final_cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 3vw; flex: 0 1 auto; min-height: 0; max-width: 80%; padding: clamp(10px, 0.9vw, 18px) 0 0 0; border-top: 1px solid var(--showcase-rule); overflow-y: auto; overscroll-behavior: contain; }
.showcase_final_col_heading { font-size: var(--showcase-col-heading); line-height: 1.2; color: var(--showcase-blue); margin: 0; padding: 0 0 6px 0; }
.showcase_final_col_body { font-size: var(--showcase-col-body); line-height: 1.3; color: var(--showcase-ink); }
.showcase_final_col_body p { padding: 0; margin: 0; }
.showcase_final_col_body p + p { padding-top: 1.1em; }
.showcase_final_col_body ul, .showcase_final_col_body ol { list-style: none; margin: 0; padding: 0; }
.showcase_final_col_body li { padding: 0; margin: 0; }
.showcase_final_col_body a { color: inherit; text-decoration: none; }
.showcase_final_col_body a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .showcase_track { transition: none; }
    .showcase_next_icon { transition: none; }
}

@media all and (min-width: 0px) and (max-width : 1024px) {

    .showcase_final_cols { max-width: 100%; }

}

@media all and (min-width: 0px) and (max-width : 900px) {

    .showcase_meta { gap: 0 24px; }
    .showcase_meta_item:first-child { min-width: 130px; }
    .showcase_final_heading { max-width: 11em; }
    .showcase_final_cols { gap: 0 24px; }

}

@media all and (min-width: 0px) and (max-width : 670px) {

    /* Client, Scope and the arrow each take a full row so the arrow always
       lands below the text - a short Scope would otherwise pull it up onto
       the same line and make it jump between slides. */
    .showcase_meta { flex-wrap: wrap; gap: 14px 20px; }
    .showcase_meta_item:first-child { min-width: 0; flex: 1 1 100%; }
    .showcase_meta_item_scope { flex: 1 1 100%; }
    .showcase_meta .showcase_next { flex: 0 0 auto; margin-left: auto; }

    .showcase_final_cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }

}

@media all and (min-width: 0px) and (max-width : 470px) {

    .showcase_final_heading { max-width: 100%; }

}

/** ------------------------------------------------------------------
    end showcase slider
   ------------------------------------------------------------------ **/