/* ===========================================================
   ONE TYPE SYSTEM FOR THE WHOLE PAGE

   The page was running two competing systems:
     Archivo + Inter  -> hero, header, Choose your path, How we work,
                         Meet Karina, Trusted by Leaders
     Source Serif 4   -> Problem, Philosophy only

   The hero and the logo lockup are Archivo, so Archivo wins and
   Source Serif 4 comes out. This snippet is named to load LAST so
   it settles every earlier sheet.

   Display / headings ....... Archivo
   Body / UI / lists ........ Inter
   Eyebrows, labels ......... Archivo 700, uppercase, tracked
   =========================================================== */

/* The family enforcement that used to sit here is gone.
   It only existed because the Elementor kit's Primary typography was set to
   Archivo Black, so every heading without an explicit family inherited the
   wrong face. The kit is now Archivo 800 and the widgets that had stray
   families (Source Serif 4, Archivo Black) are set correctly in Elementor,
   so nothing here needs to override font-family. Do not add it back --
   fix the kit or the widget instead. */

/* Heading and body typography used to be forced from here: sizes, weights,
   letter-spacing, transforms. That is why the fields showed up empty in the
   Elementor editor and nothing could be changed by hand.

   It now lives in Elementor's Global Fonts (Site Settings > Typography):
     FAS / H1 Hero .......... 64 / 48 / 38   Archivo 800
     FAS / H2 Section ....... 44 / 38 / 30   Archivo 800
     FAS / H3 Card .......... 24 / 22 / 20   Archivo 700
     FAS / Index Numeral .... 70 / 56 / 44   Archivo 800
     FAS / Eyebrow .......... 13 / 13 / 12   Archivo 700, uppercase
     FAS / Pull Quote ....... 20 / 19 / 18   Archivo 600
     FAS / Lead Paragraph ... 18 / 17 / 16   Inter 400
     FAS / Body ............. 16 / -- / 15   Inter 400
     FAS / Meta ............. 14            Inter 400

   Change a size in Site Settings and every page follows. Do not put type
   sizes back in this file. */

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===========================================================
   Testimonials, third design - the words lead.

   The first two versions were photo-led with no photos: the
   portrait was the largest object in the section and a grey
   placeholder sat in it. Decorating around that hole (red plate,
   quote mark, overlap) could not fix it. So the quote leads now
   and the person is a small avatar in the byline. This reads well
   with no photography and gets better once headshots arrive.
   =========================================================== */

/* undo the card / portrait treatment from passes 2 and 3 */
.elementor-element-ktsttrack > .e-con > .e-con:first-child::before { content: none !important; }
.elementor-element-ktsttrack > .e-con > .e-con:last-child,
.elementor-element-ktsttrack > .e-con > .e-con:first-child {
  margin-left: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.elementor-element-ktsttrack > .e-con > .e-con:last-child::after { content: none !important; }

.elementor-element-ktstvp { overflow: hidden !important; margin-top: 50px !important; }
.elementor-element-ktsttrack > .e-con {
  padding: 0 !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* ---------- the quote ---------- */
.ktst-q { position: relative; padding-top: 70px !important; }
.ktst-q .elementor-heading-title {max-width: 32ch;}
.ktst-q::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  left: -8px;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 124px;
  line-height: 1;
  color: #E0312B;
  pointer-events: none;
}
.ktst-q .elementor-heading-title {color: #1E1A16 !important;}

/* ---------- byline ---------- */
.elementor-element-ktsttrack .elementor-element[class*="by"] {
  margin-top: 42px !important;
  padding-top: 30px !important;
  border-top: 1px solid rgba(30, 26, 22, .16);
  max-width: 640px;
}
.ktst-av { width: auto !important; flex: 0 0 auto; }
.ktst-av img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px #F4F0EA, 0 0 0 4px #E0312B;
}
.ktst-n { margin-top: 0 !important; padding-top: 0 !important; }
.ktst-n::before { content: none !important; }
.ktst-n .elementor-heading-title {color: #1E1A16 !important;}
.ktst-r .elementor-heading-title {color: #8A8078 !important;}

/* ---------- progress dots ---------- */
.elementor-element-ktstdots { margin-top: 46px !important; }
.ktst-dot { width: auto !important; }
.ktst-dot .elementor-heading-title {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 100px;
  background: rgba(30, 26, 22, .2);
  font-size: 0;
  transition: width .5s cubic-bezier(.16, 1, .3, 1), background .4s ease;
}
.ktst-dot.is-active .elementor-heading-title { width: 34px; background: #E0312B; }

@media (max-width: 1024px) {
  
  .ktst-q .elementor-heading-title {max-width: 28ch;}
}
@media (max-width: 767px) {
  .ktst-q { padding-top: 54px !important; }
  .ktst-q .elementor-heading-title {max-width: none;}
  .ktst-q::before { font-size: 90px; top: -10px; }
  
  .ktst-av img { width: 46px !important; height: 46px !important; }
}

/* ===========================================================
   Testimonial, fourth pass: one full-width box, photograph on
   the left, words on the right. The words-only version read as
   an empty canvas once the quote was short.
   =========================================================== */
[data-fp~=tstbox]{
  background:#FFFFFF!important;
  border:1px solid rgba(30,26,22,.10)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  box-shadow:0 18px 44px -28px rgba(30,26,22,.30);
}
[data-fp~=tstshot]{align-self:stretch!important;min-height:100%}
[data-fp~=tstshot] .elementor-widget-container,
[data-fp~=tstshot] .elementor-widget-image{height:100%}
.ktst-shot img{
  width:100%!important;height:100%!important;
  min-height:380px;
  object-fit:cover;object-position:center top;
  display:block;border-radius:0!important;box-shadow:none!important;
}

/* the quote no longer needs the oversized quote mark that carried the old layout */
.ktst-q{padding-top:0!important}
.ktst-q::before{content:none!important}
.ktst-q .elementor-heading-title{max-width:none!important;
  color:#1E1A16!important;}



@media (max-width:1024px){
  .ktst-shot img{min-height:300px}
  
}
@media (max-width:767px){
  .ktst-shot img{min-height:240px}
  
}

/* tstbox polish: the copy column is centred against the photograph, and the
   byline rule spans the column instead of the 640px it carried in the old
   open-canvas layout. */
[data-fp~=tstbox] > .e-con:last-child{
  justify-content:center!important;
  align-items:flex-start!important;
}
.elementor-element-ktsttrack > .e-con > .e-con:last-child > .e-con{
  width:100%!important;
  max-width:none!important;
  margin-top:30px!important;
  padding-top:24px!important;
}
.ktst-n .elementor-heading-title{margin-bottom:2px!important}

/* the Meet Karina photograph sits square against the panel */
.elementor-element-kqimg img{border-radius:0!important}

/* ===========================================================
   tstbox v2: name first, then the quote, then the rating, with
   the arrows sitting inside the box at the bottom right.
   =========================================================== */
.elementor-element-ktstvp{position:relative!important}
.elementor-element-ktstnav{
  position:absolute!important;
  right:48px!important;bottom:40px!important;
  z-index:4;width:auto!important;margin:0!important;
}
/* the counter and dots go: the reference shows arrows alone */
.ktst-count{display:none!important}\n.elementor-element-ktstdots{display:flex!important;justify-content:center!important;margin-top:22px!important}

/* name and role, now leading the block */
.ktst-n .elementor-heading-title{color:#1E1A16!important;}
.ktst-r .elementor-heading-title{color:#8A8078!important;}
/* the byline had a rule above it from the previous layout */
.elementor-element-ktsttrack > .e-con > .e-con:last-child > .e-con{
  border-top:0!important;margin-top:0!important;padding-top:0!important;
  margin-bottom:22px!important;
}

.ktst-stars .elementor-heading-title{
  color:#F5A623!important;letter-spacing:3px!important;font-size:14px!important;
  margin-top:16px!important;
}

@media (max-width:767px){
  .elementor-element-ktstnav{position:static!important;margin-top:22px!important}
  
}

/* tstbox v3: the photograph was driving a 380px box while the copy only
   filled a third of it, so the block sat high with dead space beneath. */
.ktst-shot img{min-height:330px!important}
[data-fp~=tstbox] > .e-con:last-child{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding-bottom:76px!important;
}
@media (max-width:1024px){.ktst-shot img{min-height:280px!important}}
@media (max-width:767px){
  .ktst-shot img{min-height:220px!important}
  [data-fp~=tstbox] > .e-con:last-child{padding-bottom:30px!important}
}

/* ===========================================================
   tstbox v4. Two things were wrong. The photograph's square
   corner was poking out of the box's rounded one, because the
   clip was not holding. And a 330px minimum on the image forced
   a tall box that the short quote could not fill, which is what
   made the whole thing read as empty.

   Now the copy decides the height and the photograph fills
   whatever that turns out to be.
   =========================================================== */
[data-fp~=tstbox]{
  overflow:hidden!important;
  isolation:isolate;
  align-items:stretch!important;
}
[data-fp~=tstshot]{
  position:relative!important;
  overflow:hidden!important;
  border-radius:20px 0 0 20px!important;
  align-self:stretch!important;
}
[data-fp~=tstshot] .elementor-widget,
[data-fp~=tstshot] .elementor-widget-container{position:absolute!important;inset:0!important;height:100%!important}
.ktst-shot img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  min-height:0!important;
  object-fit:cover;object-position:center 20%;
  border-radius:0!important;
}

/* the copy column now sets the height */
[data-fp~=tstbox] > .e-con:last-child{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  padding:44px 52px 64px 52px!important;
  min-height:236px;
}
.elementor-element-ktstnav{right:44px!important;bottom:26px!important}

@media (max-width:767px){
  [data-fp~=tstshot]{border-radius:20px 20px 0 0!important;min-height:230px}
  [data-fp~=tstbox] > .e-con:last-child{padding:30px 26px 30px 26px!important;min-height:0}
}

/* tstbox v5: the bare [data-fp~=...] selectors were not winning against
   Elementor's own per-element rules, so the clip and the left-side radius
   are restated against the element ids, which always hold here. */
.elementor-element-kts1,
.elementor-element-kts2,
.elementor-element-kts3{
  overflow:hidden!important;
  border-radius:20px!important;
  isolation:isolate;
}
.elementor-element-ktsimg1,
.elementor-element-ktsimg2,
.elementor-element-ktsimg3{
  position:relative!important;
  overflow:hidden!important;
  border-radius:20px 0 0 20px!important;
  align-self:stretch!important;
}
@media (max-width:767px){
  .elementor-element-ktsimg1,
  .elementor-element-ktsimg2,
  .elementor-element-ktsimg3{border-radius:20px 20px 0 0!important;min-height:230px}
}