.elementor-4464 .elementor-element.elementor-element-2d384613{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;}.elementor-4464 .elementor-element.elementor-element-2d384613.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4464 .elementor-element.elementor-element-7ceef0db.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-4464 .elementor-element.elementor-element-7ceef0db{left:0px;}body.rtl .elementor-4464 .elementor-element.elementor-element-7ceef0db{right:0px;}.elementor-4464 .elementor-element.elementor-element-7ceef0db{top:0px;}.elementor-4464 .elementor-element.elementor-element-c2d3486{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-4464 .elementor-element.elementor-element-4837e447.elementor-element{--align-self:center;}.elementor-4464 .elementor-element.elementor-element-51487901.elementor-element{--align-self:center;}.elementor-4464 .elementor-element.elementor-element-5f108e9a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}@media(min-width:768px){.elementor-4464 .elementor-element.elementor-element-c2d3486{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-4837e447 */.logo-animation {
  --logo-size: 200px;
  --half-size: calc(var(--logo-size) / 2);
  --animation-time: 3.8s;

  position: relative;
  width: var(--logo-size);
  height: var(--logo-size);
  overflow: hidden;
}

.logo-half {
  position: absolute;
  left: 0;
  width: var(--logo-size);
  height: var(--half-size);
  overflow: hidden;
}

.logo-half-top {
  top: 0;
}

.logo-half-bottom {
  top: var(--half-size);
}

.logo-image {
  position: absolute;
  left: 0;
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
}

/* Full logo begins entirely below the top viewport */
.logo-image-top {
  top: var(--half-size);
}

.logo-image-bottom {
  top: calc(var(--logo-size) * -1);
}

.logo-animation.is-expanding .logo-image-top {
  animation:
    logo-top-rise var(--animation-time)
    cubic-bezier(.22,.75,.25,1)
    forwards;
}

.logo-animation.is-expanding .logo-image-bottom {
  animation:
    logo-bottom-fall var(--animation-time)
    cubic-bezier(.22,.75,.25,1)
    forwards;
}

.logo-shine-image {
  position: absolute;
  inset: 0;

  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;

  z-index: 3;
  pointer-events: none;
  opacity: 0;

  /*
   * Brighten the duplicate while retaining its gold colour.
   */
  filter:
    brightness(2.1)
    saturate(1.15)
    drop-shadow(0 0 5px rgba(255, 225, 150, .35));

  mix-blend-mode: screen;

  /*
   * A narrow diagonal band exposes only part of the bright PNG.
   */
  -webkit-mask-image:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 39%,
      rgba(0, 0, 0, .18) 44%,
      #000 50%,
      rgba(0, 0, 0, .18) 56%,
      transparent 61%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 39%,
      rgba(0, 0, 0, .18) 44%,
      #000 50%,
      rgba(0, 0, 0, .18) 56%,
      transparent 61%,
      transparent 100%
    );

  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;

  -webkit-mask-position: 145% 0;
  mask-position: 145% 0;
}

.logo-animation.is-shining .logo-shine-image {
  opacity: .9;

  animation:
    logo-metallic-sweep
    var(--shine-duration, 2600ms)
    cubic-bezier(.30, .05, .25, 1)
    forwards;
}

@keyframes logo-metallic-sweep {
  from {
    -webkit-mask-position: 145% 0;
    mask-position: 145% 0;
  }

  to {
    -webkit-mask-position: -45% 0;
    mask-position: -45% 0;
  }
}


@keyframes logo-top-rise {
  from {
    top: var(--half-size);
  }

  to {
    top: 0;
  }
}

@keyframes logo-bottom-fall {
  from {
    top: calc(var(--logo-size) * -1);
  }

  to {
    top: calc(var(--half-size) * -1);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-51487901 */.afinira-monoline {
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .afinira-monoline {
        width: 80vw;
    }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5f108e9a */.elementor-4464 .elementor-element.elementor-element-5f108e9a {
    position: absolute !important;

    left: 50%;
    top: 50%;
    z-index: 6;

    /*
     * Reduced centre-to-centre spacing:
     * horizontal approximately 33%
     * vertical approximately 15%
     */
    width: 54%; /*was 57%*/
    height: 67.5%; /*was 59.5%*/

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));

    align-items: center;
    justify-items: center;

    column-gap: 4%;
    row-gap: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, calc(-50% + 18px));

    transition:
        opacity 900ms ease,
        transform 900ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 900ms;
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, -50%);

    transition:
        opacity 900ms ease,
        transform 900ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a .afinira-menu-word {
    color: #c7a35a;

    font-family: "MundialHair", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;

    line-height: 1.2;

    letter-spacing: 0.20em;
    text-transform: none;
    text-align: center;
    transition:
        color 350ms ease,
        text-shadow 450ms ease,
        transform 450ms ease;
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, calc(-50% - 12px));

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 700ms;
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a .afinira-view-content {
    pointer-events: auto;
    cursor: pointer;
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a > .elementor-element {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    transform: scale(1.12);
    transform-origin: center;

    transition:
        transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a > .elementor-element {
    width: 100%;
    height: 100%;
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a > .elementor-element > .elementor-widget-container {
    width: 100%;
    height: 100%;
}

.elementor-4464 .elementor-element.elementor-element-5f108e9a .afinira-menu-content {
    width: 100%;
    height: 100%;
}

/* Two horizontal dividers */
.elementor-4464 .elementor-element.elementor-element-5f108e9a::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:

    /* Upper divider */
    linear-gradient(
        90deg,
        transparent 0%,
        rgba(199,163,90,.12) 8%,
        rgba(199,163,90,.5) 35%,
        #c7a35a 49%,
        #f0d79d 50%,
        #c7a35a 51%,
        rgba(199,163,90,.5) 65%,
        rgba(199,163,90,.12) 92%,
        transparent 100%
    )
    center 33.333% / 106% 1px no-repeat,

    /* Lower divider */
    linear-gradient(
        90deg,
        transparent 0%,
        rgba(199,163,90,.12) 8%,
        rgba(199,163,90,.5) 35%,
        #c7a35a 49%,
        #f0d79d 50%,
        #c7a35a 51%,
        rgba(199,163,90,.5) 65%,
        rgba(199,163,90,.12) 92%,
        transparent 100%
    )
    center 66.667% / 106% 1px no-repeat;

    filter:
        drop-shadow(0 0 4px rgba(199,163,90,.2))
        drop-shadow(0 0 12px rgba(199,163,90,.08));

    opacity: .8;
}

/* Vertical crosshair */
.elementor-4464 .elementor-element.elementor-element-5f108e9a::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;

    width: 1px;
    height: 106%;

    pointer-events: none;

    transform: translate(-50%, -50%);

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(199, 163, 90, 0.12) 8%,
            rgba(199, 163, 90, 0.5) 35%,
            #c7a35a 49%,
            #f0d79d 50%,
            #c7a35a 51%,
            rgba(199, 163, 90, 0.5) 65%,
            rgba(199, 163, 90, 0.12) 92%,
            transparent 100%
        );

    box-shadow:
        0 0 4px rgba(199, 163, 90, 0.2),
        0 0 12px rgba(199, 163, 90, 0.08);

    opacity: 0.8;
}

@media (max-width: 767px) {
    .elementor-4464 .elementor-element.elementor-element-5f108e9a {
        width: 88%;
        height: 62%;
    }

    .elementor-4464 .elementor-element.elementor-element-5f108e9a .afinira-menu-word {
        font-size: 12px;          /* try 15px or 16px */
        letter-spacing: 0.10em;   /* was 0.22em */
        line-height: 1.13;
    }

    .elementor-4464 .elementor-element.elementor-element-5f108e9a > .elementor-element {
        transform: scale(1.05);
    }

    .elementor-4464 .elementor-element.elementor-element-5f108e9a::before {
        width: 96%;
    }

    .elementor-4464 .elementor-element.elementor-element-5f108e9a::after {
        height: 96%;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d384613 */.elementor-4464 .elementor-element.elementor-element-2d384613 {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Visible before the canvas animation starts */
    background: #050608;
}

/*
 * Make the entire HTML-widget wrapper fill the hero.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .starfield-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .starfield-layer .elementor-widget-container {
    width: 100%;
    height: 100%;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-starfield {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;

    /*
     * Cellfield remains hidden until activated.
     * The duration is supplied by JavaScript.
     */
    opacity: 0;
    transition:
        opacity var(--cellfield-fade-duration, 1400ms) ease;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-starfield.is-active {
    opacity: 1;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 > .elementor-element:not(.starfield-layer):not(.afinira-story-layer) {
    position: relative;
    z-index: 2;
}

/*
 * Story layer fills the hero but remains hidden initially.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-layer .elementor-widget-container,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-interaction-layer,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-stage {
    width: 100%;
    height: 100%;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-interaction-layer {
    position: relative;
}

/*
 * Hide all story elements until JavaScript activates them.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-begin,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-video,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-image,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * Existing logo + monoline group.
 * Keep it in its current opening position for now,
 * but prepare it for the later move to the top.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-brand-group {
    transition:
        transform var(--story-brand-move-duration, 1600ms)
            cubic-bezier(.22, .75, .25, 1),
        top var(--story-brand-move-duration, 1600ms)
            cubic-bezier(.22, .75, .25, 1),
        left var(--story-brand-move-duration, 1600ms)
            cubic-bezier(.22, .75, .25, 1),
        gap var(--story-brand-move-duration, 1600ms) ease;
}

/*
 * Story layer remains non-interactive by default.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-layer {
    pointer-events: none;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-layer.is-interactive {
    pointer-events: auto;
}
/*
 * BEGIN control.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-begin {
    position: absolute;
    left: 50%;
    bottom: 12vh;
    z-index: 8;

    padding: 10px 18px;

    border: 0;
    background: transparent;
    appearance: none;

    color: #c7a35a;

    font-family: "MundialHair", sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .34em;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    cursor: pointer;

    transform: translate(-50%, 14px);

    transition:
        opacity var(--story-begin-fade-duration, 800ms) ease,
        transform var(--story-begin-fade-duration, 800ms)
            cubic-bezier(.22, .75, .25, 1),
        color 350ms ease,
        visibility 0s linear
            var(--story-begin-fade-duration, 800ms);
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-begin.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0);

    transition:
        opacity var(--story-begin-fade-duration, 800ms) ease,
        transform var(--story-begin-fade-duration, 800ms)
            cubic-bezier(.22, .75, .25, 1),
        color 350ms ease,
        visibility 0s linear 0s;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-begin.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, 8px);
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-begin:hover,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-begin:focus-visible {
    color: #f6dfa0;
}

/*
 * Story media stage.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-stage {
    position: relative;
    overflow: hidden;
}

/*
 * Video and still image 
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-video,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-image {
    position: absolute;

    left: 50%;
    top: 52%;

    width: min(88vw, 1280px);
    height: min(74vh, 720px);

    transform: translate(-50%, -56%);

    display: block;
    object-fit: contain;
    object-position: center;

    z-index: 1;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity var(--story-media-fade-duration, 1800ms) ease,
        visibility 0s linear
            var(--story-media-fade-duration, 1800ms);
}

/*
 * Soft feathered boundary around video content.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-video {
    /*
     * Keep the existing dimensions and positioning.
     * The mask gently reduces opacity at every edge.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.2) 2%,
            black 2%,
            black 98%,
            rgba(0,0,0,.2) 98%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.2) 2%,
            black 4%,
            black 96%,
            rgba(0,0,0,.2) 98%,
            transparent 100%
        );

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.2) 2%,
            black 2%,
            black 98%,
            rgba(0,0,0,.2) 98%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.2) 2%,
            black 4%,
            black 96%,
            rgba(0,0,0,.2) 98%,
            transparent 100%
        );

    mask-composite: intersect;
}

/*
 * JavaScript adds is-active.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-video.is-active,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-image.is-active {
    opacity: 1;
    visibility: visible;

    transition:
        opacity var(--story-media-fade-duration, 1800ms) ease,
        visibility 0s linear 0s;
}

/* Individual brand elements are animated by JavaScript */
.elementor-4464 .elementor-element.elementor-element-2d384613 .logo-animation,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-logo {
  will-change: transform;
  transform-origin: top left;
}
/*
 * RETURN control.
 */
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-return {
    position: absolute;

    left: 50%;
    bottom: 0;
    z-index: 9;

    padding: 10px 18px;

    border: 0;
    background: transparent;
    appearance: none;

    color: #c7a35a;

    font-family: "MundialHair", sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: lowercase;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    cursor: pointer;

    transform: translate(-50%, 14px);

    transition:
        opacity 800ms ease,
        transform 800ms cubic-bezier(.22, .75, .25, 1),
        color 350ms ease,
        text-shadow 350ms ease,
        visibility 0s linear 800ms;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-return.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0);

    transition:
        opacity 800ms ease,
        transform 800ms cubic-bezier(.22, .75, .25, 1),
        color 350ms ease,
        text-shadow 350ms ease,
        visibility 0s linear 0s;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-return:hover,
.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-return:focus-visible {
    color: #f6dfa0;

    text-shadow:
        0 0 10px rgba(199, 163, 90, .32),
        0 0 22px rgba(199, 163, 90, .14);
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-actions {
    position: absolute;

    left: 50%;
    bottom: 7vh;
    z-index: 9;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateX(-50%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity var(--story-actions-fade-duration, 1000ms) ease,
        visibility 0s linear var(--story-actions-fade-duration, 1000ms);
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-actions.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity var(--story-actions-fade-duration, 1000ms) ease,
        visibility 0s linear 0s;
}

.elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-actions .afinira-enquire {
    display: none;
}

html.afinira-sequence-locked,
body.afinira-sequence-locked {
    overflow: hidden !important;
    touch-action: none;
}

.afinira-story-stage,
.afinira-story-image {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

@media (max-width: 767px) {
    .elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-return {
        bottom: 6vh;
        font-size: 16px;
        letter-spacing: .30em;
    }
}

@media (max-width: 767px) {
    .elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-begin {
        bottom: 12vh;
        font-size: 16px;
        letter-spacing: .30em;
    }
}
@media (max-width: 767px) {

    .elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-video,
    .elementor-4464 .elementor-element.elementor-element-2d384613 .afinira-story-image {

        /* Slightly shorter */
        height: min(68vh, 720px);

        /* Move upwards a little more */
        top: 50%;
        transform: translate(-50%, -60%);
    }

}/* End custom CSS */