/* Luxury Fintech - luxfintech.com
   Hand-written replacement for the Wix build. The design tokens below are the
   values read out of the live site's compiled theme, so colours and metrics
   match the original rather than approximating it.
   ------------------------------------------------------------------------
   Wix theme -> token
     --color_37 / --color_15  36,35,35     -> --ink
     --color_40               115,115,115  -> --ink-muted
     --color_38 / --color_12  245,245,245  -> --surface
     button root              #282626      -> --btn
     vector icon fill         #FFAEA3      -> --accent
     footer bottom strip      #AD91AA      -> --footer-strip
   Type: the original licenses brandon-grot-w01-light and
   avenir-lt-w01_35-light from Monotype through Wix. Those licences do not
   travel with the content, so Jost (SIL OFL, same 1920s geometric-sans
   lineage) stands in for both. */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #242323;
  --ink-muted: #737373;
  --surface: #f5f5f5;
  --page: #ffffff;
  --accent: #ffaea3;
  --btn: #282626;
  --footer-strip: #ad91aa;
  --hairline: rgba(36, 35, 35, 0.1);
  --rule: rgba(0, 0, 0, 0.85);

  --font: "Jost", "Century Gothic", Futura, "Trebuchet MS", system-ui, sans-serif;
  --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;

  --shell: 980px;
  --gutter: clamp(20px, 5vw, 80px);

  --step-nav: 16px;
  --step-body: clamp(16px, 1.05vw + 12px, 18px);
  --step-h1: clamp(24px, 1.4vw + 18px, 27px);
  --step-h2: clamp(24px, 1.5vw + 18px, 28px);
  --step-h3: clamp(26px, 1.7vw + 19px, 30px);

  /* Entrance timings. The h1 pair still matches the original exactly; the
     hero copy runs slower and the gallery faster than Wix did, on request. */
  --motion-h1-fade: 960ms;      /* original: 960ms  */
  --motion-h1-scale: 1200ms;    /* original: 1200ms */
  --motion-copy-fade: 2000ms;   /* original: 1200ms - lengthened */
  --motion-gallery-fade: 700ms; /* original: 1400ms - shortened */
  --motion-gallery-blur: 900ms; /* original: 2000ms - shortened */
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 280;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-inline: auto;
  width: min(158px, 60%);
}

.hairline-box {
  border: 1px solid var(--hairline);
  background: transparent;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--page);
  padding: 5px 0 18px;
}

.site-header__inner {
  width: min(980px, 100% - 32px);
  margin-inline: auto;
}

/* 89 | 108 | 17 | 495 | rest, as fractions of the 980px design grid */
.site-header__top {
  display: grid;
  grid-template-columns: 9.08% 11.02% 1.73% 50.51% 1fr;
  align-items: start;
}

.site-header__brand {
  grid-column: 2;
  display: block;
  text-decoration: none;
}

.site-header__mark {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.site-header__title {
  grid-column: 4;
}

.site-header__wordmark {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 1vw + 15px, 24px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.site-nav {
  margin-top: 12px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  list-style: none;
  padding: 0;
}

.site-nav li {
  display: flex;
  align-items: center;
}

.site-nav li + li {
  border-left: 1px solid rgba(36, 35, 35, 0.5);
}

.site-nav a {
  display: inline-block;
  padding: 5px clamp(14px, 2.4vw, 34px);
  font-size: var(--step-nav);
  font-weight: 300;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.4s ease;
}

.site-nav a:hover {
  color: #000;
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  background: var(--page);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.hero__figure {
  grid-area: 1 / 1;
  justify-self: start;
  width: 647px;
  margin: 0;
  margin-left: calc(50% - 157px); /* (100% - 980px)/2 + 333px */
  background: var(--surface);
}

.hero__figure img {
  width: 100%;
  height: 829px;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__panel {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  z-index: 1;
  width: calc((100% - 160px) * 421 / 980);
  min-width: 421px;
  margin-left: 80px;
  margin-top: 57px;
  background: var(--surface);
  padding: 56px 16px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Original spacing: 64px under the title box, 25px under the rule. */
.hero__panel .rule {
  margin-block: 64px 25px;
}

.hero__title-box {
  padding: 34px 24px 18px;
  width: min(389px, 100%);
}

.hero h1 {
  font-size: var(--step-h1);
  font-weight: 450;
  line-height: 1.4;
  text-align: center;
}

.hero h1 .lede {
  font-weight: 280;
}

.hero__points {
  padding: 32px 7px 50px;
  width: min(389px, 100%);
}

.hero__points ul {
  list-style: disc outside;
  /* Jost sets marginally wider than brandon-grot-w01-light, and the last
     bullet's first line overran the 341px measure by a single pixel - enough
     to spill it onto a third line and make the box 32px taller than the
     original. -0.004em (0.07px per character) pulls it back with no visible
     change to the setting. */
  letter-spacing: -0.004em;
  padding: 0 0 0 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.8em;
  text-align: left;
  line-height: 1.8;
}

.hero__points strong {
  font-weight: 460;
}

/* ------------------------------------------------------------------- cta */
.cta {
  background: rgba(245, 245, 245, 0.8);
  padding: 26px 0 25px;
}

.cta__box {
  width: min(493px, 100%);
  margin-inline: auto;
  padding: 15px 24px 31px;
  text-align: center;
}

.cta h2 {
  font-size: var(--step-h2);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 17px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 236px;
  min-height: 42px;
  padding: 0 24px;
  border: 1px solid var(--btn);
  background: var(--btn);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.2s ease, visibility 0s;
}

.button:hover,
.button:focus-visible {
  background: #fff;
  border-color: #242323;
  color: #242323;
}

/* --------------------------------------------------------- terms/gallery */
.terms {
  padding: 55px 0 68px;
}

.terms__inner {
  display: grid;
  grid-template-columns: 338px 363px;
  gap: 0 66px;
  justify-content: center;
  align-items: start;
}

.terms__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 44px;
  list-style: none;
  padding: 0;
}

.term {
  width: 100%;
  border: 2px solid var(--surface);
  padding: 25px 21px 20px;
  text-align: left;
}

.term__icon {
  width: 35px;
  height: 46px;
  margin: 0 auto 25px;
  fill: var(--accent);
  display: block;
}

.term p {
  line-height: 1.4;
}

.term p + p {
  margin-top: 1.4em;
}

.term strong {
  font-weight: 460;
}

/* Honeycomb gallery.
   Reconstructed from the original component box (363 x 1144 for 11 images):
   pointy-top hexagons 180px wide, so 180 * 2/sqrt(3) = 207.85px tall, rows
   pitched at 0.75 * height = 155.9px. Seven rows laid out 2-1-2-1-2-1-2 give
   155.9 * 6 + 207.85 = 1143.6px, which is the 1144px the original declares.
   Everything below is expressed as a percentage of that box, so the whole
   thing scales with the container. */
.gallery {
  --hex-w: 49.6%;   /* 180 / 363 */
  --hex-h: 18.166%; /* 207.85 / 1144 */
  --pitch: 13.626%; /* 155.9 / 1144 */
  --step-x: 50.4%;  /* one column over, leaving the ~3px seam */
  position: relative;
  width: 363px;
  max-width: 100%;
  aspect-ratio: 363 / 1144;
  margin: 0;
}

.gallery__cell {
  position: absolute;
  width: var(--hex-w);
  height: var(--hex-h);
  left: calc(var(--col) * var(--step-x));
  top: calc(var(--row) * var(--pitch));
  margin: 0;
  overflow: hidden;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wix set --color4 to white at 0.8 alpha for the hover state. */
.gallery__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery__cell:hover::after,
.gallery__cell:focus-within::after {
  opacity: 0.8;
}

/* ---------------------------------------------------------------- closer */
.closer {
  padding: 43px 0 196px;
}

.closer .rule {
  width: min(246px, 70%);
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--surface);
}

.site-footer__body {
  padding: 37px 0 46px;
  text-align: center;
}

.site-footer h2 {
  font-size: var(--step-h3);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 26px;
}

.site-footer__email {
  display: inline-block;
  font-size: 18px;
  margin-bottom: 28px;
  text-decoration: none;
}

.site-footer__email:hover {
  text-decoration: underline;
}

.site-footer__address {
  width: min(367px, 100%);
  margin-inline: auto;
  padding: 12px 16px 13px;
  font-size: 16px;
}

.site-footer__map {
  display: block;
  width: 100%;
  height: 488px;
  border: 0;
  background: #e8e8e8;
}

.site-footer__strip {
  background: var(--footer-strip);
  color: #fff;
  text-align: center;
  padding: 17px 0 19px;
  font-size: 17px;
  font-weight: 300;
}

/* ---------------------------------------------------------------- motion */
/* Scroll-triggered entrance animations, matching the durations and easings
   the original used. Gated on .js (set inline in <head>) so a blocked or
   failed script can never leave content invisible. */
@keyframes lf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lf-drop-in {
  from { transform: scale(1.2); }
  to   { transform: scale(1); }
}

@keyframes lf-blur-in {
  from { filter: blur(6px); }
  to   { filter: blur(0); }
}

.js [data-motion] {
  opacity: 0;
}

.js [data-motion][data-motion-done] {
  opacity: 1;
  animation: lf-fade-in var(--motion-h1-fade) 1ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* h1: fades while easing down from 1.2x */
.js [data-motion="drop"][data-motion-done] {
  animation: lf-fade-in var(--motion-h1-fade) 1ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both,
             lf-drop-in var(--motion-h1-scale) 1ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

/* hero copy: long, unhurried fade */
.js [data-motion="soft"][data-motion-done] {
  animation: lf-fade-in var(--motion-copy-fade) 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) both;
}

/* gallery: brisk fade while the 6px blur clears */
.js [data-motion="blur"][data-motion-done] {
  animation: lf-fade-in var(--motion-gallery-fade) 1ms cubic-bezier(0.47, 0, 0.745, 0.715) both,
             lf-blur-in var(--motion-gallery-blur) 1ms linear both;
}

/* -------------------------------------------------------------- 404 page */
.notfound {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 80px var(--gutter);
}

.notfound h1 {
  font-size: var(--step-h2);
  font-weight: 500;
}

.notfound p {
  color: var(--ink-muted);
  max-width: 44ch;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .hero__figure {
    grid-area: 1 / 1;
    justify-self: stretch;
    width: auto;
    margin-left: 0;
  }

  .hero__figure img {
    height: clamp(320px, 52vw, 620px);
  }

  .hero__panel {
    grid-area: 2 / 1;
    justify-self: center;
    width: min(421px, calc(100% - 32px));
    min-width: 0;
    margin: -48px 0 0;
  }

  .terms__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    justify-items: center;
  }

  .terms__list {
    margin-top: 0;
    width: min(338px, 100%);
  }

  .gallery {
    width: min(363px, 100%);
  }

  .closer {
    padding-bottom: 96px;
  }
}

@media (max-width: 719px) {
  .site-header__top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 4px;
  }

  .site-header__brand,
  .site-header__title {
    grid-column: 1;
  }

  .site-header__mark {
    width: 88px;
  }

  .site-header__title {
    width: 100%;
  }

  .site-header__wordmark {
    padding-top: 0;
  }

  .site-footer__map {
    height: 320px;
  }

  .closer {
    padding: 32px 0 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .js [data-motion] {
    opacity: 1;
  }
}