/* New homepage (draft page 544, Figma 408:345). Only what Elementor cannot
   express natively. Everything keys off data-fp tokens, so this does nothing
   on pages that do not carry them. */

/* Individuals / Organisations toggle. Nested Tabs styles each title, but has
   no control for the strip holding them, which the design draws as one white
   capsule with an inset edge. */
[data-fp~=nhtabs] .e-n-tabs-heading{background:#fff;border-radius:50px;padding:10px;width:max-content;max-width:100%;margin-inline:auto;box-shadow:inset 0 -2px 4px #C6BEB6,inset 0 2px 4px #C6BEB6}

/* Elementor's own hover rule paints var(--n-tabs-title-background-color-hover),
   which resolves to the accent red, over the light hover colour set in the
   panel. Red text on red then vanished. Pin the variable to the panel colour. */
[data-fp~=nhtabs] .e-n-tab-title{--n-tabs-title-background-color-hover:rgba(224,49,43,.08)}

/* Both tab panels share one grid cell, so the card area is always as tall as
   the taller panel. Without this, switching tabs changed the section height
   and its cover background visibly rescaled. Nested Tabs has no equal-height
   control. The swap becomes a short cross-fade instead of a hard cut. */
[data-fp~=nhtabs] .e-n-tabs-content{display:grid!important}
[data-fp~=nhtabs] .e-n-tabs-content>.e-con{grid-area:1/1;display:flex!important;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
[data-fp~=nhtabs] .e-n-tabs-content>.e-con.e-active{opacity:1;visibility:visible;transition:opacity .45s ease .05s,visibility 0s}

/* Growth steps: a horizontal accordion. Elementor's accordions are vertical
   only. Panels, copy and colours are native; this only sets the open/closed
   geometry above tablet width. Below it the panels stack, all open. */
@media (min-width:1025px){
  [data-fp~=nhacc]{flex-wrap:nowrap!important}
  [data-fp~=nhpanel]{flex:0 1 clamp(108px, 7.45vw, 143px)!important;min-width:0;overflow:hidden;max-width:none!important;cursor:pointer;transition:flex-grow 1s cubic-bezier(.65,0,.35,1),background-color .7s ease!important}
  /* Elementor's .e-con declares its own transition list, which replaced this one
     and made the width jump; hence the !important above. */
  [data-fp~=nhpanel][data-fp~=open]{flex-grow:1!important;cursor:default}
  [data-fp~=nhpanel]:not([data-fp~=open]){background-color:#F7E5DC!important;align-items:center!important;padding:clamp(22px, 1.56vw, 30px) 0!important;gap:clamp(20px, 1.46vw, 28px)!important}
  [data-fp~=nhpanel]:not([data-fp~=open]):hover{background-color:#FBEEE8!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-body{display:none!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-title{width:auto!important;margin:0!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-title .elementor-heading-title{writing-mode:vertical-rl;font-size:clamp(25px, 1.71vw, 32.8px)!important;font-weight:600!important;letter-spacing:0!important;line-height:1.05!important;color:rgba(30,26,22,.8)!important;max-height:clamp(330px, 22.1vw, 425px)}
  [data-fp~=nhpanel]:not([data-fp~=open]) [data-fp~=nhnav]{display:none!important}
  /* Prev / next arrows inside the open panel (the JS wires them). */
  [data-fp~=nhnav] .elementor-icon{cursor:pointer}
  [data-fp~=nhnav] [aria-disabled=true]{pointer-events:none}
  [data-fp~=nhnext][aria-disabled=true]{opacity:.4}
  /* A panel's content changes layout the instant it opens or closes, so it is
     held invisible while the width moves and fades in as the width settles.
     The JS sets opening/closing for just over a second. */
  [data-fp~=nhpanel][data-fp~=opening]>*{animation:nhInOpen .5s cubic-bezier(.22,1,.36,1) .72s both}
  [data-fp~=nhpanel][data-fp~=closing]>*{animation:nhInShut .5s ease .5s both}
  [data-fp~=nhpanel]:focus-visible{outline:2px solid #fff;outline-offset:3px}
}
/* Red buttons carry an arrow in a soft white circle. Elementor's button icon
   has position and spacing controls, but no background or box size. */
[data-fp~=btnic] .elementor-button-content-wrapper{align-items:center}
[data-fp~=btnic] .elementor-button-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:rgba(255,255,255,.22)}
[data-fp~=btnic] .elementor-button-icon svg{width:.66em;height:.66em}
[data-fp~=btnic] .elementor-button-icon i{font-size:.66em}

/* Testimonials. Elementor colours the dots but has no control for the active
   dot's width, so the current slide's pill is drawn here. With one testimonial
   Elementor never starts the carousel, so it draws no dots and leaves the
   arrows live. Until a second testimonial exists the arrows show disabled and
   a single pill stands in for the dots. */
[data-fp~=nhtcar] .swiper-pagination .swiper-pagination-bullet{opacity:1;background:#D3CBC3;transition:width .3s ease,background-color .3s ease}
[data-fp~=nhtcar] .swiper-pagination .swiper-pagination-bullet-active{width:30px;border-radius:4px;background:#E0312B}
[data-fp~=nhtcar] .swiper-button-disabled,[data-fp~=nhtcar] .swiper:not(.swiper-initialized)~.elementor-swiper-button{opacity:.4;pointer-events:none}
[data-fp~=nhtcar] .swiper:not(.swiper-initialized)~.swiper-pagination{left:0;right:0;top:100%;transform:translateY(-100%);display:flex;justify-content:center}
[data-fp~=nhtcar] .swiper:not(.swiper-initialized)~.swiper-pagination::before{content:"";width:30px;height:8px;border-radius:4px;background:#E0312B}

/* Hero entrance. Pure CSS so it plays on first paint: AirLift holds every
   script until the visitor's first interaction, so a JS entrance would show
   the headline, hide it on the first scroll and bring it back. The headline
   rises out of a mask; kicker and button fade up around it. */
@media (prefers-reduced-motion:no-preference){
  [data-fp~=nhin]{animation:nhHeroIn .9s cubic-bezier(.22,1,.36,1) both}
  [data-fp~=nhin1]{animation-delay:.2s}
  [data-fp~=nhin2]{animation-name:nhHeroMask;animation-duration:1.2s;animation-delay:.35s}
  [data-fp~=nhin3]{animation-delay:.85s}
  [data-fp~=btnic] .elementor-button-icon{transition:transform .35s cubic-bezier(.22,1,.36,1)}
  [data-fp~=btnic] .elementor-button:hover .elementor-button-icon{transform:translateX(3px)}
}
@keyframes nhHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes nhHeroMask{from{opacity:0;transform:translateY(40px);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(-20% -5% -20% -5%)}}

/* Tablet and phone. Elementor has no responsive control for the carousel arrow
   size, the toggle capsule width (set above), or the growth panels' open and
   closed look, which is a state the JS sets. Below 1025px the panels stack:
   one open card, the rest as rows. */
@media (max-width:1024px){
  [data-fp~=nhcards] .elementor-swiper-button,[data-fp~=nhtcar] .elementor-swiper-button{font-size:14px!important;padding:10px!important}
  [data-fp~=nhpanel]{cursor:pointer}
  [data-fp~=nhpanel][data-fp~=open]{cursor:default}
  [data-fp~=nhpanel]:not([data-fp~=open]){flex-direction:row!important;align-items:center!important;gap:20px!important;padding:24px!important;background-color:#F7E5DC!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-body,[data-fp~=nhpanel]:not([data-fp~=open]) [data-fp~=nhnav],[data-fp~=nhpanel]:not([data-fp~=open]) [data-fp~=nhclose]{display:none!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-title{flex:1;width:auto!important;margin:0!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-title .elementor-heading-title{font-size:20px!important;font-weight:600!important;line-height:1.3!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-num .elementor-heading-title{font-size:24px!important}
  [data-fp~=nhpanel]:not([data-fp~=open])::after{content:"+";color:#E0312B;font:400 20px/1 Inter,sans-serif}
  [data-fp~=nhpanel][data-fp~=opening]>*{animation:nhInOpen .45s cubic-bezier(.22,1,.36,1) both}
  [data-fp~=nhclose] .elementor-icon{cursor:pointer}
}
@media (max-width:767px){
  [data-fp~=nhtabs] .e-n-tabs-heading{width:100%;padding:6px;box-shadow:none;border:1px solid #DCD5CD}
  [data-fp~=nhpanel]:not([data-fp~=open]){padding:20px!important}
  [data-fp~=nhpanel]:not([data-fp~=open]) .nh-title .elementor-heading-title{font-size:18px!important}
  [data-fp~=nhpanel]:not([data-fp~=open])::after{content:none}
}
/* Card carousel dots: a red pill for the current card, grey dots for the rest.
   The extra .swiper-pagination step outranks the carousel's own bullet rule,
   which loads later and sizes every dot from one variable. */
[data-fp~=nhcards] .swiper-pagination .swiper-pagination-bullet{opacity:1;background:#C6BEB6;transition:width .3s ease,background-color .3s ease}
[data-fp~=nhcards] .swiper-pagination .swiper-pagination-bullet-active{width:24px;border-radius:3px;background:#E0312B}
/* Prev / next arrows in the Individuals / Organisations cards (the JS wires them). */
[data-fp~=tabnav] .elementor-icon{cursor:pointer}
[data-fp~=tabnav] [aria-disabled=true]{pointer-events:none}
[data-fp~=tabnext][aria-disabled=true]{opacity:.4}

/* Laptop gutter. This page's sections keep at least 48px from the screen edge
   (24px felt cramped on 13-inch laptops). The header is a Theme Builder
   template shared by every page, so its padding is matched here for this
   page only rather than changed site-wide. */
@media (min-width:1025px){body.page-id-544 .elementor-element-fashbar{--padding-left:48px!important;--padding-right:48px!important}}

@keyframes nhInOpen{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes nhInShut{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  [data-fp~=nhpanel]{transition:none!important}
  [data-fp~=nhpanel]>*{animation:none!important}
  [data-fp~=nhtabs] .e-n-tabs-content>.e-con{transition:none!important}
}