/* Themes, section rhythm, type roles and the mx-* motion utilities.
   Hello Elementor supplies the reset. Classes are typed in an element's "CSS Classes"
   field, so they land on the Container or on the widget wrapper, not on the inner tag. */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a, a:hover, a:active { color: inherit; text-decoration: none; }

:focus-visible { outline: 1px solid var(--c-champagne); outline-offset: 4px; }
::selection { background: var(--c-champagne); color: var(--c-noir); }

.elementor-widget-text-editor p:last-child { margin-block-end: 0; }

/* Themes ------------------------------------------------------------ */

/* The page itself is dark, so --fg and --bg are defined everywhere. */
body, .theme-dark {
  --bg: var(--c-noir);
  --fg: var(--c-ivory);
  --muted: color-mix(in srgb, var(--c-ivory) 60%, transparent);
  --line: color-mix(in srgb, var(--c-ivory) 16%, transparent);
}

.theme-light {
  --bg: var(--c-ivory);
  --fg: var(--c-noir);
  --muted: var(--c-graphite);
  --line: var(--c-mist);
}

body, .theme-dark, .theme-light { background-color: var(--bg); color: var(--fg); }

/* Section ------------------------------------------------------------
   Sets Elementor's own padding variables, so a value typed in the panel still wins.
   The boxed inner is 1440px wide; the gutter sits outside it. */

.e-con.section {
  --padding-top: var(--section);
  --padding-bottom: var(--section);
  --padding-left: var(--gutter);
  --padding-right: var(--gutter);
  /* The space between the blocks of a section belongs to the components, not to a default gap. */
  --row-gap: 0px;
  position: relative;
}

/* A full-width section that holds an edge-to-edge row (a backdrop, the events rail).
   Its inner Containers take the class "wrap" to come back inside the measure. */
.e-con.section--bleed { --padding-left: 0px; --padding-right: 0px; }

.e-con.wrap {
  --padding-left: var(--gutter);
  --padding-right: var(--gutter);
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
}

/* The 12-column grid. On a boxed Container the grid is its inner box. Children take
   their columns from the component or page styles. */
.e-con-full.grid,
.e-con-boxed.grid > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--grid-gap);
}

/* Type roles ---------------------------------------------------------
   A widget normally takes its role from a Global Font in the panel. These classes
   give the same result where a class is handier than a panel setting. */

.elementor-heading-title { text-wrap: balance; }
.elementor-heading-title em { font-style: italic; }

.t-hero .elementor-heading-title,
.t-display .elementor-heading-title,
.t-h2 .elementor-heading-title,
.t-h3 .elementor-heading-title {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.022em;
}

.t-hero .elementor-heading-title { font-size: var(--t-hero); line-height: .96; }
.t-display .elementor-heading-title { font-size: var(--t-display); line-height: 1.03; }
.t-h2 .elementor-heading-title { font-size: var(--t-h2); line-height: 1.05; }
.t-h3 .elementor-heading-title { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.012em; }

.t-lead, .t-lead .elementor-heading-title { font-size: var(--t-lead); font-weight: 300; line-height: 1.55; }

.t-label, .t-label .elementor-heading-title {
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.t-muted, .t-muted .elementor-heading-title { color: var(--muted); }
.t-accent, .t-accent .elementor-heading-title { color: var(--c-champagne); }

/* Photography ------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--c-anthracite);
}

/* The class sits on an Image or Featured Image widget, whose wrapper holds the img. */
.elementor-element.media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: var(--mx-photo-filter);
  transition: scale 1.6s var(--ease-out);
}

/* Motion utilities --------------------------------------------------
   Hidden states apply only when the script is running (html.js). The class is not
   added inside the Elementor editor, where everything shows in its final state. */

.js .mx-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 1.1s var(--ease-out) var(--mx-delay, 0s),
    transform 1.1s var(--ease-out) var(--mx-delay, 0s);
}
.js .mx-reveal.is-in { opacity: 1; transform: none; }

.mx-line {
  display: block;
  overflow: hidden;
  padding: .08em .1em .16em 0;
  margin: -.08em -.1em -.16em 0;
}
.mx-line > span { display: block; white-space: nowrap; }
.js .mx-lines:not(.is-split) { visibility: hidden; }
.js .mx-lines .mx-line > span {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.25s var(--ease-out);
  transition-delay: calc(var(--mx-delay, 0s) + var(--i, 0) * .09s);
}
.js .mx-lines.is-in .mx-line > span { transform: none; }

/* The clip sits on the image, not on the observed frame: an element fully
   clipped by its own clip-path never reports as intersecting. */
.js .mx-mask { background-color: transparent; }
.js .mx-mask img {
  clip-path: inset(0 0 100% 0);
  scale: 1.12;
  transition:
    clip-path 1.4s var(--ease-inout) var(--mx-delay, 0s),
    scale 1.8s var(--ease-out) var(--mx-delay, 0s);
}
.js .mx-mask.is-in img { clip-path: inset(0); scale: 1; }

.elementor-element.mx-parallax img {
  position: absolute;
  top: -8%;
  left: 0;
  height: 116%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .mx-reveal { opacity: 1; transform: none; }
  .js .mx-lines .mx-line > span { transform: none; }
  .js .mx-mask img { clip-path: none; scale: 1; }
}