/* =========================================================
   Shared furniture for the inner pages.
   Loads site-wide. Every hook is a [data-fp] ATTRIBUTE, not a
   class, because Elementor drops _css_classes on containers.
   The homepage keys off element ids, so it stays untouched.
   ========================================================= */
:root{--fp-bone:#F4F0EA;--fp-ink:#1E1A16;--fp-red:#E0312B;--fp-muted:#8A8078;--fp-dark:#0E0C0B;--fp-rule:rgba(30,26,22,.16)}

/* ---------- dark panel: the house hero recipe ---------- */
[data-fp~=hero]{position:relative;overflow:hidden}
[data-fp~=hero]::after{content:""!important;position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 78% at 50% 128%,rgba(224,49,43,.82) 0%,rgba(224,49,43,.32) 38%,rgba(224,49,43,0) 68%)}
[data-fp~=hero]>.e-con{position:relative;z-index:2}

/* the closing band is the same recipe, dialled back so it reads
   as a full stop rather than a second hero */
[data-fp~=band]{position:relative;overflow:hidden}
[data-fp~=band]::after{content:""!important;position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(115% 72% at 50% 132%,rgba(224,49,43,.62) 0%,rgba(224,49,43,.2) 40%,rgba(224,49,43,0) 70%)}
[data-fp~=band]>.e-con{position:relative;z-index:2}
/* ---------- eyebrow ---------- */
[data-fp~=eyebrow] .elementor-heading-title{font-family:Archivo,sans-serif!important;font-weight:700!important;font-size:12.5px!important;letter-spacing:2.6px!important;text-transform:uppercase!important;display:inline-flex;align-items:center;gap:10px}
.elementor-element-e512b13 .elementor-heading-title::before,
.elementor-element-945c980 .elementor-heading-title::before,
.elementor-element-0f10774 .elementor-heading-title::before,
.elementor-element-3afb976 .elementor-heading-title::before,
.elementor-element-2447013 .elementor-heading-title::before,
[data-fp~=eyebrow] .elementor-heading-title::before{content:"";width:7px;height:7px;border-radius:100px;background:var(--fp-red);flex:0 0 auto}

/* ---------- display headline ---------- */
[data-fp~=display] .elementor-heading-title{font-family:Archivo,sans-serif!important;font-weight:800!important;letter-spacing:-2.2px!important;line-height:1.03!important}
/* one accent word per screen, same family - never a second font */
[data-fp~=display] .elementor-heading-title em{font-style:normal;color:var(--fp-red)}

/* ---------- watermark ---------- */
[data-fp~=wm] .elementor-heading-title{font-family:Archivo,sans-serif!important;font-weight:800!important;letter-spacing:-2px!important;line-height:.82!important;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text;background-image:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 78%)}
[data-fp~=wmdark] .elementor-heading-title{background-image:linear-gradient(180deg,rgba(30,26,22,.11) 0%,rgba(30,26,22,0) 78%)}

/* ---------- hairline ---------- */
[data-fp~=rule]{height:1px!important;min-height:1px!important;background:var(--fp-rule);width:100%}
[data-fp~=ruledark]{background:rgba(255,255,255,.16)}
/* ---------- buttons ---------- */
[data-fp~=btn] .elementor-button{font-family:Archivo,sans-serif!important;font-weight:700!important;font-size:15px!important;letter-spacing:.2px!important;border-radius:100px!important;padding:17px 34px!important;background:var(--fp-red)!important;color:#fff!important;border:0!important;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
[data-fp~=btn] .elementor-button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(224,49,43,.32)}
[data-fp~=btn] .elementor-button:active{transform:translateY(0) scale(.985)}
/* ghost sits on the dark panels, so it needs its own contrast */
[data-fp~=btnghost] .elementor-button{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.34)!important}
[data-fp~=btnghost] .elementor-button:hover{background:rgba(255,255,255,.07)!important;border-color:#fff!important;box-shadow:none}
[data-fp~=btnline] .elementor-button{background:transparent!important;color:var(--fp-ink)!important;border:1px solid var(--fp-rule)!important}
[data-fp~=btnline] .elementor-button:hover{background:transparent!important;border-color:var(--fp-red)!important;color:var(--fp-red)!important;box-shadow:none}

/* ---------- cards ---------- */
[data-fp~=card]{border:1px solid var(--fp-rule);border-radius:16px;background:rgba(255,255,255,.5);transition:border-color .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
[data-fp~=card]:hover{border-color:rgba(224,49,43,.4);transform:translateY(-4px)}
[data-fp~=carddark]{border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.04);transition:border-color .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
[data-fp~=carddark]:hover{border-color:rgba(255,255,255,.34);transform:translateY(-4px)}
[data-fp~=num] .elementor-heading-title{font-family:Archivo,sans-serif!important;font-weight:800!important;font-size:14px!important;letter-spacing:.6px!important;color:var(--fp-red)!important}
/* ---------- reveal targets ----------
   Hidden only while html.fp-anim is set, which the loader adds before
   paint and removes on a 2.6s failsafe. If the JS never runs, the
   content still shows up. GSAP takes ownership of the inline styles
   the moment it initialises, so there is no flash either way. */
html.fp-anim [data-fpr],html.fp-anim [data-fph]{opacity:0}
@media (prefers-reduced-motion:reduce){
  html.fp-anim [data-fpr],html.fp-anim [data-fph]{opacity:1}
  [data-fpr],[data-fph]{transform:none!important}
}

/* ---------- photo inset ---------- */
[data-fp~=shot] img{border-radius:16px!important;display:block;width:100%;height:auto;object-fit:cover}

/* ---------- dark panel typography ---------- */
/* A dark panel defaults its headings and body copy to light, but a colour set
   on the widget has to win. With !important it could not, so the panel field
   looked dead and the change only ever showed in the editor - which does not
   load this stylesheet at all.
   Specificity ladder, no !important anywhere:
     kit default            .elementor-widget-heading .elementor-heading-title   (0,2,0)
     these rules                                                                (0,2,0)-(0,3,0)
     Elementor per widget   .elementor-N .elementor-element.elementor-element-X (0,3,0)-(0,4,0)  <- wins */
[data-fp~=ondark] .elementor-widget-heading .elementor-heading-title{color:#fff}
[data-fp~=ondark] .elementor-widget-text-editor,[data-fp~=ondark] .elementor-widget-text-editor p{color:rgba(255,255,255,.74)}
[data-fp~=ondark] [data-fp~=eyebrow] .elementor-heading-title{color:rgba(255,255,255,.62)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  [data-fp~=display] .elementor-heading-title{letter-spacing:-1.4px!important}
}
@media (max-width:767px){
  [data-fp~=display] .elementor-heading-title{letter-spacing:-.9px!important;line-height:1.07!important}
  [data-fp~=eyebrow] .elementor-heading-title{font-size:11.5px!important;letter-spacing:2.2px!important}
  [data-fp~=btn] .elementor-button,[data-fp~=btnghost] .elementor-button,[data-fp~=btnline] .elementor-button{padding:15px 28px!important;font-size:14px!important}
  [data-fp~=hero]::after{background:radial-gradient(150% 62% at 50% 124%,rgba(224,49,43,.8) 0%,rgba(224,49,43,.3) 40%,rgba(224,49,43,0) 70%)}
}

/* ---------- canvas ----------
   The homepage paints a background on every section, so it never needed a
   body colour. The inner pages let sections sit on the bone directly. */
body{background-color:var(--fp-bone)}

/* ---------- card grids ----------
   Elementor lays containers out with percentage widths, which overflow the
   moment a column gap is added (4x25% + 3x20px > 100%). Grid divides what is
   actually left after the gaps, so a row never wraps by accident.

   A boxed container wraps its children in .e-con-inner, a full-width one does
   not, so the grid has to land on whichever node actually holds the cards. */
[data-fp~=grid4]>.e-con-inner,[data-fp~=grid4]:not(:has(>.e-con-inner)),
[data-fp~=grid3]>.e-con-inner,[data-fp~=grid3]:not(:has(>.e-con-inner)),
[data-fp~=grid2]>.e-con-inner,[data-fp~=grid2]:not(:has(>.e-con-inner)){display:grid!important;gap:20px;align-items:stretch}
[data-fp~=grid4]>.e-con-inner,[data-fp~=grid4]:not(:has(>.e-con-inner)){grid-template-columns:repeat(4,minmax(0,1fr))}
[data-fp~=grid3]>.e-con-inner,[data-fp~=grid3]:not(:has(>.e-con-inner)){grid-template-columns:repeat(3,minmax(0,1fr))}
[data-fp~=grid2]>.e-con-inner,[data-fp~=grid2]:not(:has(>.e-con-inner)){grid-template-columns:repeat(2,minmax(0,1fr))}
[data-fp~=grid4] .e-con,[data-fp~=grid3] .e-con,[data-fp~=grid2] .e-con{width:auto!important;max-width:none!important}
@media (max-width:1024px){
  [data-fp~=grid4]>.e-con-inner,[data-fp~=grid4]:not(:has(>.e-con-inner)),
  [data-fp~=grid3]>.e-con-inner,[data-fp~=grid3]:not(:has(>.e-con-inner)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  [data-fp~=grid4]>.e-con-inner,[data-fp~=grid4]:not(:has(>.e-con-inner)),
  [data-fp~=grid3]>.e-con-inner,[data-fp~=grid3]:not(:has(>.e-con-inner)),
  [data-fp~=grid2]>.e-con-inner,[data-fp~=grid2]:not(:has(>.e-con-inner)){grid-template-columns:minmax(0,1fr)}
}

/* ---------- contact form ----------
   Elementor ships its own field chrome, which is neither Archivo nor the
   brand rule colour, so the whole group is restated here rather than tuned
   widget by widget in the editor. */
[data-fp~=form] .elementor-field-group>label{font-family:Archivo,sans-serif!important;font-weight:700!important;font-size:12px!important;letter-spacing:1.6px!important;text-transform:uppercase;color:#8A8078!important;margin-bottom:9px}
[data-fp~=form] input[type=text],[data-fp~=form] input[type=email],[data-fp~=form] textarea,[data-fp~=form] select{font-family:Inter,sans-serif!important;font-size:15.5px!important;line-height:1.5!important;background:#fff!important;border:1px solid var(--fp-rule)!important;border-radius:10px!important;padding:14px 16px!important;color:var(--fp-ink)!important;transition:border-color .3s ease,box-shadow .3s ease}
[data-fp~=form] ::placeholder{color:#A79E95!important}
[data-fp~=form] input:focus,[data-fp~=form] textarea:focus,[data-fp~=form] select:focus{border-color:var(--fp-red)!important;box-shadow:0 0 0 3px rgba(224,49,43,.12)!important;outline:none!important}
[data-fp~=form] .elementor-button[type=submit]{font-family:Archivo,sans-serif!important;font-weight:700!important;font-size:15px!important;background:var(--fp-red)!important;color:#fff!important;border:0!important;border-radius:100px!important;padding:16px 36px!important;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
[data-fp~=form] .elementor-button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(224,49,43,.3)}
[data-fp~=form] .elementor-button[type=submit]:active{transform:translateY(0) scale(.985)}
[data-fp~=form] .elementor-message{font-family:Inter,sans-serif!important;font-size:15px!important}

/* the submit button is a button, not a banner, and it sits at the end of
   the row it shares with the consent line - the panel's Position control
   writes a class this Pro build ships no stylesheet for */
[data-fp~=form] .elementor-field-type-submit{justify-content:flex-end!important}
[data-fp~=form] .elementor-button[type=submit]{width:auto!important;flex:0 0 auto!important}

/* ---------- numbered rows ----------
   The three-column row (index / title / description) has to become a stack on
   a phone. Elementor keeps the per-widget percentage widths at every
   breakpoint, so the columns have to be released explicitly. */
@media (max-width:767px){
  [data-fp~=row]>.elementor-widget{width:100%!important;max-width:100%!important}
  [data-fp~=row]{gap:6px!important;padding-top:22px!important;padding-bottom:22px!important}
}

[data-fp~=hero],[data-fp~=band]{overflow:hidden!important}

/* ---------- mobile navigation: slide-in panel ----------
   Elementor's own dropdown drops inline under the bar. This turns the same
   markup into a full-height drawer that slides in from the right, with the
   close control at the top. Elementor still writes an inline max-height on
   the container, so that is neutralised rather than fought. */
@media (max-width:1024px){
  .elementor-element-fashrow{flex-wrap:nowrap!important}
  .elementor-element-fashnav{width:auto!important;flex:0 0 auto!important}
  .elementor-element-fashnav .elementor-menu-toggle{margin-left:auto}

  .fas-nav-shell .elementor-nav-menu--dropdown{
    position:absolute!important;
    top:0!important;right:0!important;left:auto!important;bottom:0!important;
    width:min(430px,88vw)!important;
    max-width:none!important;
    max-height:none!important;
    height:100dvh!important;
    margin:0!important;
    background:#141110!important;
    border-left:1px solid rgba(255,255,255,.12);
    box-shadow:-30px 0 60px -20px rgba(0,0,0,.75);
    transform:translateX(102%);
    transition:transform .55s cubic-bezier(.16,1,.3,1);
    z-index:100000;
    overflow-y:auto;
    padding:104px 0 40px!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown{transform:translateX(0)}

  .fas-nav-shell .elementor-nav-menu--dropdown a.elementor-item{
    font-family:Archivo,sans-serif!important;
    font-weight:800!important;
    font-size:25px!important;
    letter-spacing:-.5px!important;
    line-height:1.2!important;
    text-transform:none!important;
    white-space:nowrap!important;
    padding:17px 34px!important;
    color:#F2EDE7!important;
    border-bottom:1px solid rgba(255,255,255,.08);
    opacity:0;transform:translateX(20px);
    transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1),color .25s ease;
  }
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown a.elementor-item{opacity:1;transform:translateX(0)}
  .fas-nav-shell .elementor-nav-menu--dropdown a.elementor-item:hover,
  .fas-nav-shell .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{color:#E0312B!important}
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown li:nth-child(1) a{transition-delay:.12s}
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown li:nth-child(2) a{transition-delay:.18s}
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown li:nth-child(3) a{transition-delay:.24s}
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown li:nth-child(4) a{transition-delay:.30s}
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown li:nth-child(5) a{transition-delay:.36s}
  html.fas-nav-open .fas-nav-shell .elementor-nav-menu--dropdown li:nth-child(6) a{transition-delay:.42s}

  html.fas-nav-open,html.fas-nav-open body{overflow:hidden!important}
}
@media (prefers-reduced-motion:reduce){
  .fas-nav-shell .elementor-nav-menu--dropdown,
  .fas-nav-shell .elementor-nav-menu--dropdown a.elementor-item{transition-duration:.001s!important}
}

/* scrim and close control for the drawer */
.fas-nav-scrim{position:fixed;inset:0;z-index:99998;background:rgba(10,8,7,.62);opacity:0;pointer-events:none;transition:opacity .45s ease}
html.fas-nav-open .fas-nav-scrim{opacity:1;pointer-events:auto}
.fas-nav-close{position:fixed;top:18px;right:18px;z-index:100001;width:48px;height:48px;padding:0;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;align-items:center;justify-content:center;display:none;opacity:0;transform:scale(.82);transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease}
html.fas-nav-open .fas-nav-close{display:flex;opacity:1;transform:scale(1)}
.fas-nav-close:hover{background:#E0312B;border-color:#E0312B}
.fas-nav-close svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (min-width:1025px){.fas-nav-scrim,.fas-nav-close{display:none!important}}

@media (max-width:1024px){
  /* the dropdown list ships as an inline row; the drawer needs a stack */
  .fas-nav-shell .elementor-nav-menu--dropdown ul.elementor-nav-menu{display:block!important;width:100%!important}
  .fas-nav-shell .elementor-nav-menu--dropdown ul.elementor-nav-menu li{display:block!important;width:100%!important;float:none!important}
  .fas-nav-shell .elementor-nav-menu--dropdown a.elementor-item{
    display:block!important;text-align:left!important;justify-content:flex-start!important;
  }
  .elementor-element-fashnav .elementor-nav-menu--main{display:none!important}
}

/* the drawer lives in a fixed, clipped shell: a fixed element translated off
   the right edge still widens the document, which added a horizontal scrollbar
   to every page on mobile */
.fas-nav-shell{position:fixed;inset:0;z-index:100000;overflow:hidden;pointer-events:none}
html.fas-nav-open .fas-nav-shell{pointer-events:auto}
@media (min-width:1025px){.fas-nav-shell{display:none!important}}

/* Elementor's sticky 'effects' state clears the bar's background once it
   detaches, which left white nav text sitting on the bone page. The bar
   keeps its colour in every state. */
/* Per the Figma: the header is transparent and sits over the hero. It only
   takes a solid ground once it detaches, otherwise the white nav would be
   invisible the moment it crosses a bone section. */
/* measured, not guessed: the bar renders at 66px */
:root{--fas-headerh:66px}
.elementor-element-fashbar{
  background-color:transparent!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.elementor-element-fashbar.elementor-sticky--effects{
  background-color:#131017!important;
  border-bottom-color:rgba(122,122,122,.30)!important;
}
/* the hero rises under the header so nothing sits in a dead strip above it */
.elementor-element-khero01{
  margin-top:calc(var(--fas-headerh) * -1)!important;
  padding-top:165px!important;
}

/* testimonial clip: the slide has to clip so the photograph's square corner
   does not sit outside the box's rounded one. Restated here because the same
   rules in snippet 99 were not taking. */
.elementor-element-ktsttrack > .e-con{
  overflow:hidden!important;
  border-radius:20px!important;
}
.elementor-element-ktsttrack > .e-con > .e-con:first-child{
  border-radius:20px 0 0 20px!important;
  overflow:hidden!important;
}
@media (max-width:767px){
  .elementor-element-ktsttrack > .e-con > .e-con:first-child{border-radius:20px 20px 0 0!important}
}

/* inner heroes rise under the transparent header too, otherwise About,
   For Leaders, For Companies and Contact keep a dead dark strip on top.
   Their visible top space stays what it was: 89 header + 152 padding. */
[data-fp~=hero]{
  margin-top:calc(var(--fas-headerh) * -1)!important;
  padding-top:240px!important;
}
@media (max-width:767px){
  [data-fp~=hero]{padding-top:170px!important}
  .elementor-element-khero01{padding-top:130px!important}
}

/* Meet Karina photograph is full bleed in the design: it fills the right half
   of the panel, touching top, bottom and right. The KARINA watermark is not
   in the design at all, though CHOOSE still is. */
/* Meet Karina is laid out entirely in Elementor now: kqpanel is full width,
   kqleft carries a calc() left padding to sit on the 1320 grid, and the
   portrait is kqright's background. Nothing to override here. */
.kq-pic img{
  width:100%!important;height:100%!important;
  object-fit:cover;object-position:center 18%;
  border-radius:0!important;display:block;
}
.elementor-element-kqwm{display:none!important}

/* ---------- FAQ accordion ----------
   Elementor's accordion ships with heavy chrome. Stripped back to a ruled
   list so it reads like the rest of the page. */
[data-fp~=faq] .elementor-accordion-item{
  border:0!important;
  border-top:1px solid rgba(30,26,22,.14)!important;
}
[data-fp~=faq] .elementor-accordion-item:last-child{border-bottom:1px solid rgba(30,26,22,.14)!important}
[data-fp~=faq] .elementor-tab-title{
  background:transparent!important;
  padding:24px 44px 24px 0!important;
  font-family:Archivo,sans-serif!important;
  font-weight:700!important;
  font-size:19px!important;
  letter-spacing:-.2px!important;
  line-height:1.35!important;
  position:relative;
  transition:color .25s ease;
}
[data-fp~=faq] .elementor-tab-title:hover{color:#E0312B!important}
[data-fp~=faq] .elementor-tab-title .elementor-accordion-icon{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:auto!important;font-size:14px!important;color:#E0312B!important;
}
[data-fp~=faq] .elementor-tab-content{
  border:0!important;background:transparent!important;
  padding:0 60px 26px 0!important;
  font-family:Inter,sans-serif!important;
  font-size:16px!important;line-height:1.7!important;color:#6B6259!important;
}
[data-fp~=faq] .elementor-tab-content p{margin:0!important;max-width:62ch}
@media (max-width:767px){
  [data-fp~=faq] .elementor-tab-title{font-size:17px!important;padding:20px 38px 20px 0!important}
  [data-fp~=faq] .elementor-tab-content{padding:0 0 22px 0!important;font-size:15px!important}
}

/* both dark panels are square in the design; the 28px rule in snippet 16
   would not give way, so it is restated here where rules reliably land */
.elementor-element-kevpanel,
.elementor-element-kqpanel{border-radius:0!important}
@media (max-width:767px){
  .elementor-element-kevpanel,
  .elementor-element-kqpanel{border-radius:0!important}
}

/* Button hover. Elementor has no control for a lift, so it stays here.
   Colour, type, padding and radius all live in Elementor. */
.elementor-widget-button .elementor-button{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.elementor-widget-button .elementor-button:hover{transform:translateY(-2px)}
.kout-btn .elementor-button:hover{box-shadow:0 16px 32px -14px rgba(224,49,43,.75)}
.kevb-cta .elementor-button:hover{box-shadow:0 16px 32px -14px rgba(0,0,0,.8)}
/* Meet Karina: the photograph is the column's own background now, so it
   always fills the panel. The image widget is left in place but hidden, so
   the picture can still be swapped from Elementor's background control. */


/* ---------- testimonial carousel ----------
   Everything about the card itself is set in Elementor. Only these three are
   here, because Elementor has no control for them: arrows parked inside the
   card, the active bullet drawn as a pill, and the curly quotes. */
[data-fp~=tcarousel] .elementor-swiper-button{
  position:absolute!important;top:auto!important;bottom:68px!important;transform:none!important;z-index:2!important;
  width:44px!important;height:44px!important;border-radius:50%!important;
  border:1px solid rgba(30,26,22,.20)!important;background:#fff!important;color:#1E1A16!important;
  display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;
  transition:border-color .3s ease,color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)!important;
}
[data-fp~=tcarousel] .elementor-swiper-button-prev{left:auto!important;right:104px!important}
[data-fp~=tcarousel] .elementor-swiper-button-next{left:auto!important;right:44px!important}
[data-fp~=tcarousel] .elementor-swiper-button:hover{border-color:#E0312B!important;color:#E0312B!important;transform:translateY(-2px)!important}

[data-fp~=tcarousel] .swiper-pagination{position:static!important;margin-top:26px!important;text-align:center!important}
[data-fp~=tcarousel] .swiper-pagination-bullet{
  width:8px!important;height:8px!important;border-radius:100px!important;opacity:1!important;
  background:rgba(30,26,22,.22)!important;
  transition:width .35s ease,background .35s ease!important;
}
[data-fp~=tcarousel] .swiper-pagination-bullet-active{width:22px!important;background:#E0312B!important}

[data-fp~=tquote] .elementor-heading-title::before{content:"\201C"}
[data-fp~=tquote] .elementor-heading-title::after{content:"\201D"}

@media (max-width:767px){
  [data-fp~=tcarousel] .elementor-swiper-button{bottom:auto!important;top:calc(100% - 96px)!important}
  [data-fp~=tcarousel] .elementor-swiper-button-prev{right:74px!important}
  [data-fp~=tcarousel] .elementor-swiper-button-next{right:24px!important}
}

/* Two the Elementor controls would not hold: the bullet strip needs a full-width
   line to centre on, and the photo column kept being shrunk by the flex row
   even with Shrink set to 0 in the panel. */
[data-fp~=tcarousel] .swiper-pagination{width:100%!important}
/* the portrait is a dynamic tag, and Elementor only emits background-size,
   -position and -repeat when a STATIC image url is saved, so with a tag the
   photo tiles at its natural size. These three finish the job. */
[data-fp~=tcarousel] .elementor-element-ltleft{flex:0 0 370px!important;max-width:none!important}
[data-fp~=tcarousel] .elementor-element-ltleft{background-size:cover;background-position:center 22%;background-repeat:no-repeat}
@media (max-width:1024px){[data-fp~=tcarousel] .elementor-element-ltleft{flex-basis:280px!important}}
@media (max-width:767px){[data-fp~=tcarousel] .elementor-element-ltleft{flex:0 0 auto!important}}

/* swiper draws the bullet strip as a pagination flex row, so text-align does
   nothing here and it has to be centred on the main axis instead. */
[data-fp~=tcarousel] .swiper-pagination{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important}
[data-fp~=tcarousel] .swiper-pagination-bullet{margin:0!important}

/* swiper keeps its translate for absolute centring on the strip. Once the strip
   is static that translate drags it 660px to the left, so it has to go. */
[data-fp~=tcarousel] .swiper-pagination{transform:none!important;left:auto!important;right:auto!important}

/* ---------- eyebrow dot ----------
   Every section eyebrow carries a dot in front of it. The heading widget has no
   icon slot, so it is drawn here. Red on the bone sections; white on the dark
   panels, where red would sink into the ground. */
.elementor-element-khero04 .elementor-heading-title,
.elementor-element-kp2eyebrow .elementor-heading-title,
.elementor-element-kp3eyebrow .elementor-heading-title,
.elementor-element-kevlabel .elementor-heading-title,
.elementor-element-koutlabel .elementor-heading-title,
.elementor-element-kqeyebrow .elementor-heading-title,
.elementor-element-ktstlabel .elementor-heading-title,
.elementor-element-kfaqeb .elementor-heading-title,
.elementor-element-e512b13 .elementor-heading-title,
.elementor-element-945c980 .elementor-heading-title,
.elementor-element-0f10774 .elementor-heading-title,
.elementor-element-3afb976 .elementor-heading-title,
.elementor-element-2447013 .elementor-heading-title,
[data-fp~=eyebrow] .elementor-heading-title{
  display:inline-flex;align-items:center;gap:10px;
}
.elementor-element-khero04 .elementor-heading-title::before,
.elementor-element-kp2eyebrow .elementor-heading-title::before,
.elementor-element-kp3eyebrow .elementor-heading-title::before,
.elementor-element-paeyeb .elementor-heading-title::before,
.elementor-element-kevlabel .elementor-heading-title::before,
.elementor-element-koutlabel .elementor-heading-title::before,
.elementor-element-kqeyebrow .elementor-heading-title::before,
.elementor-element-ktstlabel .elementor-heading-title::before,
.elementor-element-kfaqeb .elementor-heading-title::before,
.elementor-element-e512b13 .elementor-heading-title::before,
.elementor-element-945c980 .elementor-heading-title::before,
.elementor-element-0f10774 .elementor-heading-title::before,
.elementor-element-3afb976 .elementor-heading-title::before,
.elementor-element-2447013 .elementor-heading-title::before,
[data-fp~=eyebrow] .elementor-heading-title::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:#E0312B;
}
.elementor-element-paeyeb .elementor-heading-title::before,
.elementor-element-kevlabel .elementor-heading-title::before,
.elementor-element-kqeyebrow .elementor-heading-title::before,
[data-fp~=hero] [data-fp~=eyebrow] .elementor-heading-title::before{
  background:#FFFFFF;
}

/* the drawer's own Contact button, added by 23-fas-mobile-nav */
.fas-nav-shell .fas-nav-cta{
  display:block;margin:26px 34px 0;padding:15px 24px;
  background:#E0312B;color:#fff;border-radius:100px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.2px;text-align:center;text-decoration:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.fas-nav-shell .fas-nav-cta:hover{transform:translateY(-2px)}

/* an eyebrow on a dark panel takes a white dot */
[data-fp~=eyebrowlight] .elementor-heading-title::before{background:#FFFFFF!important}