/* =========================================================
   AETHEL REALTY
   MASTER STYLESHEET
========================================================= */


/* =========================================================
   FONTS
========================================================= */

@font-face {
  font-family: "BlauerNue";
  src:
    url("../fonts/BlauerNue-Regular.woff2") format("woff2"),
    url("../fonts/BlauerNue-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BlauerNue";
  src:
    url("../fonts/BlauerNue-Medium.woff2") format("woff2"),
    url("../fonts/BlauerNue-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BlauerNue";
  src:
    url("../fonts/BlauerNue-Bold.woff2") format("woff2"),
    url("../fonts/BlauerNue-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BlauerNue";
  src:
    url("../fonts/BlauerNue-Black.woff2") format("woff2"),
    url("../fonts/BlauerNue-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.72);

  --accent: #8FE3C0;

  --overlay: rgba(8, 12, 16, 0.35);

  --font:
    "BlauerNue",
    "Helvetica Neue",
    Arial,
    sans-serif;

  --ease:
    cubic-bezier(0.22, 1, 0.36, 1);

  --cream: #ffffff;
  --teal-ink: #0F6868;
  --body-text: #55534C;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: #0b0e11;
  color: var(--ink);
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;
}

button {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   PINNED HERO
   UNCHANGED
========================================================= */

.hero-track {
  position: relative;
  height: 180vh;
}

.hero-track .hero {
  position: sticky;
  top: 0;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 640px;

  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero__bg {
  position: absolute;
  inset: 0;

  z-index: 0;

  will-change: transform;
  transform-origin: center;
}

.hero__bg-img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.12);

  opacity: 0;

  animation:
    kenburns-in 2.2s var(--ease) forwards;

  background:
    linear-gradient(160deg,
      #16324a 0%,
      #2c4d63 35%,
      #b9714b 65%,
      #16324a 100%);
}

@keyframes kenburns-in {
  0% {
    opacity: 0;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1.03);
  }
}


/* HERO IMAGE — BLACK GRADIENT OVERLAY */


/* HERO IMAGE — DARK CINEMATIC GRADIENT */

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.75) 100%
  );
}



/* =========================================================
   HERO NAVIGATION
========================================================= */

.hero__nav {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    32px clamp(24px, 5vw, 64px);

  opacity: 0;

  transform:
    translateY(-14px);

  animation:
    fade-down 0.7s var(--ease) forwards;

  animation-delay: 0.15s;
}



@keyframes fade-down {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   LOGO
========================================================= */

.logo {
  display: flex;
  align-items: center;

  gap: 10px;

  color: var(--ink);

  text-decoration: none;
}

.logo__mark {
  height: 30px;
  width: auto;

  display: block;

  flex-shrink: 0;
}

.logo__word {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.nav-toggle {
  position: relative;

  width: 34px;
  height: 22px;

  background: none;
  border: 0;

  cursor: pointer;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: space-between;

  padding: 3px 0;

  z-index: 60;
}

.nav-toggle span {
  display: block;

  height: 2px;

  background: var(--ink);

  border-radius: 1px;

  transition:
    transform 0.3s var(--ease),
    opacity 0.3s var(--ease),
    width 0.3s var(--ease);
}

.nav-toggle span:nth-child(1) {
  width: 100%;
}

.nav-toggle span:nth-child(2) {
  width: 70%;
}

.nav-toggle span:nth-child(3) {
  width: 40%;
}

.nav-toggle.is-open span:nth-child(1) {
  width: 100%;

  transform:
    translateY(9px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  width: 100%;

  transform:
    translateY(-9px) rotate(-45deg);
}


/* =========================================================
   FULLSCREEN MENU
========================================================= */

body.nav-open {
  overflow: hidden;
}

.menu-overlay {
  position: fixed;

  inset: 0;

  z-index: 40;

  background: var(--teal-ink);

  transform:
    translateY(-100%);

  transition:
    transform 0.7s var(--ease);

  display: flex;
  align-items: center;

  padding:
    clamp(48px, 8vh, 96px) clamp(24px, 6vw, 96px) 0;

  pointer-events: none;
}

.menu-overlay.is-open {
  transform:
    translateY(0);

  pointer-events: auto;
}

.menu-overlay__links {
  list-style: none;

  width: 100%;
}

.menu-overlay__links li+li {
  margin-top: 4px;
}

.menu-overlay__link,
.menu-overlay__toggle {
  display: inline-flex;

  align-items: center;

  gap: 16px;

  background: none;

  border: 0;

  cursor: pointer;

  padding: 0;

  font: inherit;

  font-size:
    clamp(34px,
      6.5vw,
      68px);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: -0.01em;

  line-height: 1.15;

  color: var(--ink);

  text-decoration: none;

  opacity: 0;

  transform:
    translateY(28px);

  transition:
    opacity 0.35s var(--ease),
    color 0.25s var(--ease);
}


/* MENU ENTRANCE */

.menu-overlay.is-open .menu-overlay__link,

.menu-overlay.is-open .menu-overlay__toggle {
  animation:
    link-in 0.6s var(--ease) forwards;
}

.menu-overlay__links li:nth-child(1) .menu-overlay__link,

.menu-overlay__links li:nth-child(1) .menu-overlay__toggle {
  animation-delay: 0.20s;
}

.menu-overlay__links li:nth-child(2) .menu-overlay__link,

.menu-overlay__links li:nth-child(2) .menu-overlay__toggle {
  animation-delay: 0.28s;
}

.menu-overlay__links li:nth-child(3) .menu-overlay__link,

.menu-overlay__links li:nth-child(3) .menu-overlay__toggle {
  animation-delay: 0.36s;
}

.menu-overlay__links li:nth-child(4) .menu-overlay__link,

.menu-overlay__links li:nth-child(4) .menu-overlay__toggle {
  animation-delay: 0.44s;
}

.menu-overlay__links li:nth-child(5) .menu-overlay__link,

.menu-overlay__links li:nth-child(5) .menu-overlay__toggle {
  animation-delay: 0.52s;
}

.menu-overlay__links li:nth-child(6) .menu-overlay__link,

.menu-overlay__links li:nth-child(6) .menu-overlay__toggle {
  animation-delay: 0.60s;
}

@keyframes link-in {
  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}

.menu-overlay__link.is-current {
  color: var(--accent);
}

.menu-overlay__links:hover>li>.menu-overlay__link:not(:hover),

.menu-overlay__links:hover>li>.menu-overlay__toggle:not(:hover) {
  opacity: 0.35;
}

.menu-overlay__link:hover,
.menu-overlay__toggle:hover,
.menu-overlay__item--has-sub.is-open .menu-overlay__toggle {
  color: var(--accent);
}

.menu-overlay__arrow {
  display: inline-block;

  opacity: 0;

  transform:
    translateX(-10px);

  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.menu-overlay__link:hover .menu-overlay__arrow {
  opacity: 1;

  transform:
    translateX(0);
}


/* =========================================================
   PROPERTIES SUBMENU
========================================================= */

.menu-overlay__chevron {
  flex-shrink: 0;

  width: 0.5em;
  height: 0.5em;

  transition:
    transform 0.35s var(--ease);
}

.menu-overlay__item--has-sub.is-open .menu-overlay__chevron {
  transform:
    rotate(180deg);
}

.menu-overlay__submenu {
  list-style: none;

  overflow: hidden;

  max-height: 0;

  transition:
    max-height 0.45s var(--ease);
}

.menu-overlay__item--has-sub.is-open .menu-overlay__submenu {
  max-height: 260px;
}

.menu-overlay__submenu li {
  margin-top: 2px;
}

.menu-overlay__submenu a {
  display: block;

  font-size:
    clamp(18px,
      2.4vw,
      24px);

  font-weight: 500;

  color: var(--ink-dim);

  text-decoration: none;

  padding:
    6px 0 6px 4px;

  transition:
    color 0.25s var(--ease);
}

.menu-overlay__submenu li:first-child a {
  margin-top: 14px;
}

.menu-overlay__submenu a:hover {
  color: var(--accent);
}


/* =========================================================
   HERO REGION RAIL
========================================================= */

.hero__regions {
  position: absolute;

  left:
    clamp(24px,
      5vw,
      64px);

  top: 25%;

  z-index: 3;

  opacity: 0;

  transform:
    translateY(16px);

  animation:
    fade-up 0.8s var(--ease) forwards;

  animation-delay:
    1.05s;
}

.hero__regions-rule {
  display: block;

  width: 40px;
  height: 1px;

  background: var(--ink);

  margin-bottom: 18px;
}

.hero__regions ul {
  list-style: none;
}

.hero__regions li {
  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.12em;

  line-height: 1.9;
}


/* =========================================================
   HERO SUPPORTING COPY
========================================================= */

.hero__eyebrow {
  position: absolute;

  right:
    clamp(24px,
      5vw,
      64px);

  bottom: 38%;

  z-index: 3;

  max-width: 320px;

  text-align: right;

  opacity: 0;

  transform:
    translateY(16px);

  animation:
    fade-up 0.8s var(--ease) forwards;

  animation-delay:
    1.15s;
}



.hero__eyebrow span {
  color: var(--ink);

  border-bottom:
    1px solid var(--accent);

  padding-bottom: 3px;
}


/* =========================================================
   HERO HEADLINE
========================================================= */

.hero__headline {
  position: relative;

  z-index: 2;

  padding:
    0 clamp(20px, 4.5vw, 56px) clamp(28px, 5vw, 56px);

  font-weight: 600;

  line-height: 0.92;

  text-transform: uppercase;

  letter-spacing: -0.01em;
}

.line {
  display: block;
}

.line--left {
  text-align: left;
}

.line--right {
  text-align: right;
}

.line__mask {
  display: block;

  overflow: hidden;
}

.line__inner {
  display: block;

  font-size:
    clamp(48px,
      8vw,
      128px);

  transform:
    translateY(115%);

  animation:
    line-up 0.9s var(--ease) forwards;
}

.line:nth-of-type(1) .line__inner {
  animation-delay: 0.55s;
}

.line:nth-of-type(2) .line__inner {
  animation-delay: 0.68s;
}

.line:nth-of-type(3) .line__inner {
  animation-delay: 0.81s;
}

.line:nth-of-type(4) .line__inner {
  animation-delay: 0.94s;
}

@keyframes line-up {
  to {
    transform:
      translateY(0);
  }
}

@keyframes fade-up {
  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   INTRO / ABOUT
   UNCHANGED
========================================================= */

.intro {
  background: var(--cream);

  padding:
    clamp(72px,
      12vw,
      160px) clamp(24px,
      5vw,
      64px);
}

.intro__grid {
  display: grid;

  grid-template-columns:
    1.2fr 1fr;

  gap:
    clamp(32px,
      6vw,
      96px);

  max-width: 1280px;

  margin: 0 auto;
}

.intro__headline {
  font-family: var(--font);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: -0.01em;

  line-height: 1.05;

  font-size:
    clamp(30px,
      4.2vw,
      56px);

  color: #000000;

  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 0.8s var(--ease),

    transform 0.8s var(--ease);
}

.intro__copy {
  align-self: end;

  max-width: 380px;

  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 0.8s var(--ease) 0.12s,

    transform 0.8s var(--ease) 0.12s;
}

.intro__copy p {
  font-size: 17px;

  line-height: 1.7;

  color: var(--body-text);

  margin-bottom: 24px;
}

.intro__cta {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.02em;

  color: var(--teal-ink);

  text-decoration: none;

  border-bottom:
    1px solid var(--teal-ink);

  padding-bottom: 4px;

  transition:
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    gap 0.25s var(--ease);
}

.intro__cta:hover {
  color: var(--accent);

  border-color: var(--accent);

  gap: 12px;
}


/* =========================================================
   INTRO REVEAL
========================================================= */

.intro [data-reveal].is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   GLOBAL REAL ESTATE ADVISOR
========================================================= */

.focus {
  position: relative;

  background: #0F6868;

  color: #ffffff;

  padding:
    clamp(75px, 8vw, 110px) clamp(24px, 5vw, 64px) clamp(85px, 9vw, 125px);

  overflow: hidden;
}

.focus__inner {
  width: 100%;

  max-width: 1280px;

  margin: 0 auto;
}


/* =========================================================
   FOCUS REVEAL
========================================================= */

.focus [data-reveal] {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 0.8s var(--ease) calc(var(--i, 0) * 0.1s),

    transform 0.8s var(--ease) calc(var(--i, 0) * 0.1s);
}

.focus [data-reveal].is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   FOCUS HEADER
========================================================= */

.focus__head {
  display: grid;

  grid-template-columns:
    1.12fr 0.88fr;

  gap:
    clamp(50px,
      9vw,
      140px);

  align-items: start;

  margin-bottom:
    clamp(38px,
      4vw,
      55px);
}

.focus__headline {
  max-width: 650px;

  margin: 0;

  font-size:
    clamp(38px,
      4.2vw,
      62px);

  font-weight: 600;

  line-height: 0.96;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.focus__intro {
  max-width: 430px;

  padding-top: 5px;
}

.focus__intro p {
  margin: 0;

  font-size:
    clamp(16px,
      1.25vw,
      19px);

  line-height: 1.65;

  color:
    rgba(255,
      255,
      255,
      0.72);
}


/* =========================================================
   AUDIENCE
========================================================= */

.audience {
  display: grid;

  grid-template-columns:
    minmax(360px, 0.82fr) minmax(520px, 1.18fr);

  gap:
    clamp(55px,
      8vw,
      110px);

  align-items: start;

  border-top:
    1px solid rgba(255,
      255,
      255,
      0.25);

  padding-top:
    clamp(24px,
      2.5vw,
      34px);
}

.audience__list {
  width: 100%;
}


/* =========================================================
   AUDIENCE ITEM
========================================================= */

.audience__item {
  position: relative;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr) 28px;

  gap: 20px;

  align-items: center;

  padding:
    clamp(24px,
      2.4vw,
      31px) 0;

  border: 0;

  border-bottom:
    1px solid rgba(255,
      255,
      255,
      0.23);

  background: transparent;

  color: #ffffff;

  text-align: left;

  cursor: pointer;

  font-family: inherit;

  appearance: none;

  transition:
    opacity 0.28s ease;
}

.audience__item:first-child {
  padding-top: 0;
}

.audience__item-main {
  min-width: 0;
}


/* =========================================================
   AUDIENCE HEADLINE
========================================================= */

.audience__item h3 {
  margin: 0;

  font-size:
    clamp(28px,
      3vw,
      46px);

  font-weight: 600;

  line-height: 0.92;

  letter-spacing: -0.04em;

  text-transform: uppercase;

  color:
    rgba(255,
      255,
      255,
      0.45);

  transition:
    color 0.28s ease,
    transform 0.4s var(--ease);
}


/* =========================================================
   MARKET
========================================================= */

.audience__market {
  display: block;

  margin-top: 11px;

  font-size: 11px;

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: 0.10em;

  text-transform: uppercase;

  color:
    rgba(143,
      227,
      192,
      0.48);

  transition:
    color 0.28s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.audience__item-description {
  max-width: 325px;

  max-height: 0;

  margin-top: 0;

  overflow: hidden;

  opacity: 0;

  transform:
    translateY(5px);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.55;

  color:
    rgba(255,
      255,
      255,
      0);

  transition:
    max-height 0.4s var(--ease),
    margin-top 0.4s var(--ease),
    opacity 0.25s ease,
    transform 0.4s var(--ease),
    color 0.25s ease;
}


/* =========================================================
   MOBILE-ONLY AUDIENCE IMAGE
   Hidden by default (desktop/tablet use the shared
   .audience__visual panel on the right instead); the
   max-width: 760px override further down switches this
   on and hides .audience__visual in its place.
========================================================= */

.audience__mobile-content {
  display: none;
}


/* =========================================================
   INDICATOR
========================================================= */

.audience__indicator {
  position: relative;

  width: 26px;
  height: 1px;

  background:
    rgba(255,
      255,
      255,
      0.24);

  overflow: hidden;
}

.audience__indicator::after {
  content: "";

  position: absolute;

  inset: 0;

  background: #8FE3C0;

  transform:
    translateX(-105%);

  transition:
    transform 0.4s var(--ease);
}


/* =========================================================
   ACTIVE AUDIENCE
========================================================= */

.audience__item.is-active h3 {
  color: #ffffff;

  transform:
    translateX(8px);
}

.audience__item.is-active .audience__market {
  color: #8FE3C0;
}

.audience__item.is-active .audience__indicator::after {
  transform:
    translateX(0);
}

.audience__item.is-active .audience__item-description {
  max-height: 110px;

  margin-top: 14px;

  opacity: 1;

  transform:
    translateY(0);

  color:
    rgba(255,
      255,
      255,
      0.76);
}


/* =========================================================
   AUDIENCE HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .audience__list:hover .audience__item:not(.is-active) {
    opacity: 0.60;
  }

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.audience__visual {
  width: 100%;

  min-width: 0;
}

.audience__image-wrap {
  position: relative;

  width: 100%;

  height:
    clamp(520px,
      47vw,
      670px);

  overflow: hidden;

  background:
    rgba(0,
      0,
      0,
      0.08);
}


/* =========================================================
   AUDIENCE IMAGES
========================================================= */

.audience__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  will-change:
    opacity,
    transform;
}

.audience__image--current {
  z-index: 1;

  opacity: 1;

  transform:
    scale(1.025);

  transition:
    opacity 0.4s ease,
    transform 0.8s var(--ease);
}

.audience__image--next {
  z-index: 2;

  opacity: 0;

  transform:
    scale(1.045);

  transition:
    opacity 0.4s ease,
    transform 0.8s var(--ease);
}

.audience__image--next.is-changing {
  opacity: 1;

  transform:
    scale(1);
}


/* =========================================================
   IMAGE SHADE
========================================================= */

.audience__image-shade {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background:
    linear-gradient(180deg,
      rgba(5, 20, 20, 0.02) 0%,
      rgba(5, 20, 20, 0) 58%,
      rgba(5, 20, 20, 0.18) 100%);
}


/* =========================================================
   TABLET — ADVISOR
========================================================= */

@media (max-width: 1050px) {

  .focus {
    padding:
      80px clamp(28px, 4vw, 44px) 90px;
  }

  .focus__head {
    grid-template-columns:
      1fr 0.82fr;

    gap:
      clamp(35px,
        5vw,
        60px);

    margin-bottom: 44px;
  }

  .focus__headline {
    font-size:
      clamp(38px,
        5vw,
        52px);
  }

  .focus__intro {
    max-width: 360px;
  }

  .focus__intro p {
    font-size: 16px;
  }

  .audience {
    grid-template-columns:
      minmax(280px, 0.9fr) minmax(360px, 1.1fr);

    gap:
      clamp(32px,
        5vw,
        55px);

    padding-top: 28px;
  }

  .audience__item {
    padding:
      24px 0;
  }

  .audience__item h3 {
    font-size:
      clamp(26px,
        3.5vw,
        37px);
  }

  .audience__item-description {
    max-width: 290px;

    font-size: 14px;
  }

  .audience__image-wrap {
    height:
      clamp(470px,
        58vw,
        580px);
  }

}


/* =========================================================
   MOBILE — HERO
========================================================= */

@media (max-width: 760px) {

  .hero-track {
    height: 100vh;
  }

  .hero-track .hero {
    position: relative;
    top: auto;
  }

  .hero {
    min-height: 620px;
  }

  .hero__nav {
    padding:
      24px 20px;
  }

  .logo__mark {
    height: 26px;
  }

  .hero__regions {
    left: 20px;

    top: 19%;
  }

  .hero__regions li {
    font-size: 11px;
  }

  .hero__eyebrow {
    right: 20px;

    bottom: 38%;

    max-width: 230px;
  }

  .hero__eyebrow p {
    font-size: 11px;
  }

  .hero__headline {
    padding:
      0 18px 28px;
      margin-bottom: 70px;
  }

  .line__inner {
    font-size:
      clamp(44px,
        14vw,
        72px);
  }

}


/* =========================================================
   MOBILE — MENU
========================================================= */

@media (max-width: 760px) {

  .menu-overlay {
    padding:
      100px 20px 30px;
  }

  .menu-overlay__link,
  .menu-overlay__toggle {
    font-size:
      clamp(30px,
        9vw,
        46px);

    line-height: 1.08;
  }

  .menu-overlay__submenu a {
    font-size: 18px;
  }

}


/* =========================================================
   MOBILE — INTRO / ABOUT
   PRESERVED
========================================================= */

@media (max-width: 760px) {

  .intro {
    padding:
      72px 20px;
  }

  .intro__grid {
    grid-template-columns:
      1fr;

    gap: 42px;
  }

  .intro__headline {
    font-size:
      clamp(34px,
        10vw,
        50px);
  }

  .intro__copy {
    max-width: 100%;
  }

  .intro__copy p {
    font-size: 16px;
  }

}


/* =========================================================
   MOBILE — ADVISOR
========================================================= */

@media (max-width: 760px) {

  .focus {
    padding:
      68px 20px 72px;
  }

  .focus__inner {
    width: 100%;

    max-width: none;
  }


  /* HEADER */

  .focus__head {
    display: grid;

    grid-template-columns:
      1fr;

    gap: 24px;

    margin-bottom: 42px;
  }

  .focus__headline {
    max-width: 100%;

    font-size:
      clamp(34px,
        10vw,
        48px);

    line-height: 0.98;

    letter-spacing: -0.035em;
  }

  .focus__intro {
    width: 100%;

    max-width: 100%;

    padding-top: 0;
  }

  .focus__intro p {
    max-width: 500px;

    font-size: 15px;

    line-height: 1.6;
  }


  /* AUDIENCE */

  .audience {
    display: block;

    width: 100%;

    padding-top: 0;

    border-top:
      1px solid rgba(255,
        255,
        255,
        0.25);
  }

  .audience__list {
    width: 100%;
  }


  /* ITEMS */

  .audience__item {
    display: grid;

    grid-template-columns:
      1fr;

    width: 100%;

    padding:
      28px 0;

    gap: 0;

    cursor: pointer;
  }

  .audience__item:first-child {
    padding-top: 28px;
  }

  .audience__item-main {
    width: 100%;
  }


  /* TITLES */

  .audience__item h3,
  .audience__item.is-active h3 {
    max-width: 100%;

    margin: 0;

    font-size:
      clamp(29px,
        8.2vw,
        40px);

    line-height: 0.96;

    letter-spacing: -0.035em;

    color:
      rgba(255,
        255,
        255,
        0.48);

    transform: none;

    transition:
      color 0.3s ease;
  }

  .audience__item.is-active h3 {
    color: #ffffff;
  }


  /* MARKET */

  .audience__market {
    margin-top: 10px;

    font-size: 10px;

    color:
      rgba(143,
        227,
        192,
        0.5);
  }

  .audience__item.is-active .audience__market {
    color: #8FE3C0;
  }


  /* DESCRIPTION — ONLY ACTIVE */

  .audience__item-description {
    max-width: 100%;

    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    opacity: 0;

    transform:
      translateY(6px);

    font-size: 14px;

    line-height: 1.55;

    color:
      rgba(255,
        255,
        255,
        0);

    transition:
      max-height 0.45s var(--ease),
      margin-top 0.45s var(--ease),
      opacity 0.3s ease,
      transform 0.45s var(--ease);
  }

  .audience__item.is-active .audience__item-description {
    max-height: 120px;

    margin-top: 14px;

    opacity: 1;

    transform:
      translateY(0);

    color:
      rgba(255,
        255,
        255,
        0.76);
  }


  /* NO INDICATOR ON MOBILE */

  .audience__indicator {
    display: none;
  }


  /* ONE DYNAMIC IMAGE */

  .audience__visual {
    display: block;

    width: 100%;

    margin-top: 32px;
  }

  .audience__image-wrap {
    width: 100%;

    height:
      clamp(330px,
        105vw,
        520px);
  }

  .audience__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .focus {
    padding:
      60px 18px 64px;
  }

  .focus__head {
    gap: 20px;

    margin-bottom: 34px;
  }

  .focus__headline {
    font-size:
      clamp(32px,
        10.5vw,
        43px);
  }

  .focus__intro p {
    font-size: 14px;

    line-height: 1.58;
  }

  .audience__item {
    padding:
      24px 0;
  }

  .audience__item:first-child {
    padding-top: 24px;
  }

  .audience__item h3,
  .audience__item.is-active h3 {
    font-size:
      clamp(27px,
        8.4vw,
        36px);
  }

  .audience__item-description,
  .audience__item.is-active .audience__item-description {
    font-size: 13px;
  }

  .audience__visual {
    margin-top: 28px;
  }

  .audience__image-wrap {
    height:
      clamp(310px,
        108vw,
        430px);
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

  .focus {
    padding-left: 16px;
    padding-right: 16px;
  }

  .focus__headline {
    font-size: 31px;
  }

  .audience__item h3,
  .audience__item.is-active h3 {
    font-size: 27px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }

}


/* =========================================================
   FINAL MOBILE ADVISOR OVERRIDE
========================================================= */

@media screen and (max-width: 760px) {

  /* SECTION */

  .focus {
    padding: 64px 20px 70px;
  }


  .focus__head {
    display: block;
    margin-bottom: 40px;
  }


  .focus__headline {
    width: 100%;
    max-width: 100%;

    margin-bottom: 24px;

    font-size: clamp(34px, 10vw, 46px);
    line-height: .98;
  }


  .focus__intro {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }


  .focus__intro p {
    width: 100%;
    max-width: 100%;

    font-size: 15px;
    line-height: 1.6;
  }



  /* LIST */

  .audience {
    display: block;

    width: 100%;

    padding-top: 0;

    border-top:
      1px solid rgba(255, 255, 255, .25);
  }


  .audience__list {
    display: block;
    width: 100%;
  }



  /* HIDE DESKTOP IMAGE */

  .audience__visual {
    display: none !important;
  }



  /* EACH AUDIENCE ITEM */

  .audience__item,
  .audience__item:first-child {
    display: block;

    width: 100%;

    padding: 30px 0 18px;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: default;

    opacity: 1 !important;
  }


  .audience__item-main {
    width: 100%;
  }



  /* ALL HEADLINES */

  .audience__item h3,
  .audience__item.is-active h3 {

    margin: 0;

    width: 100%;

    font-size: clamp(29px, 8.3vw, 40px);

    line-height: .96;

    letter-spacing: -.035em;

    color: #ffffff !important;

    opacity: 1 !important;

    transform: none !important;
  }



  /* MARKET */

  .audience__market,
  .audience__item.is-active .audience__market {

    display: block;

    margin-top: 10px;

    font-size: 10px;

    line-height: 1.3;

    color: #8FE3C0 !important;

    opacity: 1;
  }



  /* ALL DESCRIPTIONS */

  .audience__item-description,
  .audience__item.is-active .audience__item-description {

    display: block !important;

    width: 100%;
    max-width: 430px;

    height: auto !important;
    max-height: none !important;

    margin-top: 14px !important;

    overflow: visible !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    font-size: 14px;

    line-height: 1.6;

    color:
      rgba(255, 255, 255, .76) !important;
  }



  /* REMOVE DESKTOP INDICATOR */

  .audience__indicator {
    display: none !important;
  }



  /* EACH MOBILE IMAGE */

  .audience__mobile-content {
    display: block !important;

    width: 100%;

    margin-top: 18px;

    padding-bottom: 32px;

    border-bottom:
      1px solid rgba(255, 255, 255, .24);
  }


  .audience__mobile-image {
    position: relative;

    display: block;

    width: 100%;

    height: clamp(260px, 78vw, 360px);

    overflow: hidden;

    background: rgba(0, 0, 0, .1);
  }


  .audience__mobile-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

  .focus {
    padding:
      58px 16px 64px;
  }


  .focus__headline {
    font-size:
      clamp(32px, 10vw, 42px);
  }


  .focus__intro p {
    font-size: 15px;
  }


  .audience__item,
  .audience__item:first-child {
    padding:
      26px 0 17px;
  }


  .audience__item h3,
  .audience__item.is-active h3 {
    font-size:
      clamp(27px, 8.5vw, 36px);
  }


  .audience__item-description,
  .audience__item.is-active .audience__item-description {
    font-size: 15px;
  }


  .audience__mobile-content {
    padding-bottom: 27px;
  }


  .audience__mobile-image {
    height:
      clamp(235px, 76vw, 310px);
  }

}







/* =========================================================
   CURATED MARKETS
========================================================= */

.markets,
.markets * {
  box-sizing: border-box;
}


.markets {
  position: relative;

  width: 100%;

  background: #ffffff;
  color: #111111;

  padding:
    clamp(80px, 7vw, 105px) clamp(24px, 5vw, 64px) clamp(90px, 8vw, 120px);

  overflow: hidden;
}


.markets__inner {
  width: 100%;
  max-width: 1280px;

  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.markets__header {
  width: 100%;

  margin-bottom:
    clamp(48px, 5vw, 68px);
}


.markets__title {
  max-width: 760px;
  margin: 0;

  font-family: inherit;
  font-size: clamp(38px, 3.5vw, 52px);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.035em;

  text-transform: uppercase;
  color: #111;
}

/* =========================================================
   GRID
   TWO SMALL + ONE LARGE
========================================================= */

.markets__grid {
  display: grid;

  grid-template-columns:
    .82fr .82fr 1.36fr;

  gap: 12px;

  width: 100%;

  align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.market-card {
  display: block;

  width: 100%;

  color: #111111 !important;

  text-decoration: none !important;
}


.market-card:link,
.market-card:visited,
.market-card:hover,
.market-card:active {
  color: #111111 !important;

  text-decoration: none !important;
}


/* =========================================================
   IMAGE
========================================================= */

.market-card__image {
  position: relative;

  width: 100%;
  height: 370px;

  overflow: hidden;

  background: #eeeeee;
}


/* UK — FEATURE IMAGE */

.market-card:nth-child(3) .market-card__image {
  height: 500px;
}


.market-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1);

  transition:
    transform 1.1s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   INFO
========================================================= */

.market-card__info {
  padding-top: 17px;
}


/* =========================================================
   COUNTRY + ARROW
========================================================= */

.market-card__heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding: 0;

  border: 0;
}


.market-card__heading h3 {
  margin: 0;

  font-size:
    clamp(22px, 1.7vw, 28px);

  font-weight: 600;

  line-height: .95;

  letter-spacing: -.035em;

  text-transform: uppercase;

  color: #111111;

  transition:
    color .35s ease;
}


/* =========================================================
   ARROW
========================================================= */

.market-card__arrow {
  display: block;

  flex: 0 0 auto;

  width: auto;
  height: auto;

  border: 0;
  border-radius: 0;

  font-size:
    clamp(27px, 2vw, 33px);

  font-weight: 300;

  line-height: .8;

  color: #0F6868;

  transform: translate(0, 0);

  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    color .35s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.market-card__info p {
  max-width: 320px;

  margin:
    15px 0 0;

  font-size:
    clamp(14px, 1vw, 16px);

  font-weight: 400;

  line-height: 1.6;

  color:
    rgba(17, 17, 17, .62);
}


.market-card:nth-child(3) .market-card__info p {
  max-width: 390px;
}


/* =========================================================
   DESKTOP HOVER
   VERY SUBTLE
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .market-card:hover .market-card__image img {
    transform: scale(1.025);
  }


  .market-card:hover .market-card__arrow {
    transform:
      translate(5px, -5px);

    color: #0F6868;
  }

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.markets-reveal {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity .85s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s),

    transform .85s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s);
}


.markets-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .markets {
    padding:
      75px 28px 90px;
  }


  .markets__title {
    font-size:
      clamp(38px, 5vw, 52px);
  }


  .markets__grid {
    grid-template-columns:
      1fr 1fr;

    gap:
      36px 12px;
  }


  .market-card__image {
    height: 390px;
  }


  /* UK FULL WIDTH */

  .market-card:nth-child(3) {
    grid-column:
      1 / -1;
  }


  .market-card:nth-child(3) .market-card__image {
    height: 480px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .markets {
    padding:
      64px 20px 78px;
  }


  .markets__header {
    margin-bottom: 38px;
  }


  .markets__title {
    max-width: 100%;

    font-size:
      clamp(34px, 9.5vw, 44px);

    line-height: .94;
  }


  .markets__title br {
    display: none;
  }


  .markets__grid {
    grid-template-columns: 1fr;

    gap: 44px;
  }


  .market-card:nth-child(3) {
    grid-column: auto;
  }


  /* SAME IMAGE SIZE ON MOBILE */

  .market-card__image,
  .market-card:nth-child(3) .market-card__image {
    height:
      clamp(320px, 95vw, 450px);
  }


  .market-card__info {
    padding-top: 15px;
  }


  .market-card__heading h3 {
    font-size: 24px;
  }


  .market-card__arrow {
    font-size: 28px;
  }


  .market-card__info p,
  .market-card:nth-child(3) .market-card__info p {
    max-width: 100%;

    font-size: 14px;

    line-height: 1.6;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .markets {
    padding:
      58px 16px 68px;
  }


  .markets__grid {
    gap: 40px;
  }


  .market-card__image,
  .market-card:nth-child(3) .market-card__image {
    height: 390px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .markets-reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .market-card__image img,
  .market-card__arrow {
    transition: none;
  }

}





/* =========================================================
   SERVICE GALLERY
========================================================= */

.service-gallery,
.service-gallery * {
  box-sizing: border-box;
}

.service-gallery {
  width: 100%;
  padding:
    clamp(80px, 8vw, 115px) clamp(24px, 5vw, 64px) clamp(90px, 9vw, 125px);

  background: #FCFAF5;
  color: #111;
  overflow: hidden;
}

.service-gallery__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.service-gallery__header {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: end;

  margin-bottom: clamp(70px, 8vw, 105px);
}


.service-gallery__title {
  margin: 0;

  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 600;

  line-height: .95;
  letter-spacing: -.04em;

  text-transform: uppercase;
}

.service-gallery__intro {
  max-width: 420px;
  margin: 0;

  font-size: 15px;
  line-height: 1.65;

  color: rgba(17, 17, 17, .58);
}


/* =========================================================
   STAGGERED GRID
========================================================= */

.service-gallery__grid {
  display: grid;

  grid-template-columns:
    1.25fr .72fr .95fr;

  gap: clamp(35px, 5vw, 70px);

  align-items: start;
}


/* =========================================================
   CARDS
========================================================= */

.service-card {
  display: block;

  color: #111;
  text-decoration: none;
}


/* LARGE */

.service-card--large {
  margin-top: 0;
}

.service-card--large .service-card__image {
  height: clamp(470px, 43vw, 610px);
}


/* SMALL */

.service-card--small {
  margin-top: clamp(110px, 11vw, 155px);
}

.service-card--small .service-card__image {
  height: clamp(300px, 29vw, 390px);
}


/* MEDIUM */

.service-card--medium {
  margin-top: clamp(220px, 21vw, 285px);
}

.service-card--medium .service-card__image {
  height: clamp(350px, 33vw, 450px);
}


/* =========================================================
   IMAGE
========================================================= */

.service-card__image {
  position: relative;

  width: 100%;
  overflow: hidden;

  background: #ddd;

  clip-path: inset(0 0 100% 0);

  transition:
    clip-path 1s cubic-bezier(.22, 1, .36, 1);
}

.service-card.is-visible .service-card__image {
  clip-path: inset(0);
}

.service-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.025);

  transition:
    transform 1s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   TEXT
========================================================= */

.service-card__bottom {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding-top: 20px;
}

.service-card__bottom h3 {
  margin: 0;

  font-size: clamp(20px, 1.75vw, 27px);
  font-weight: 600;

  line-height: 1.02;
  letter-spacing: -.025em;

  text-transform: uppercase;
}

.service-card__bottom span {
  flex: 0 0 auto;

  font-size: 23px;
  line-height: 1;

  color: #0f6868;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .service-card:hover .service-card__image img {
    transform: scale(1.045);
  }

  .service-card:hover .service-card__bottom span {
    transform: translate(4px, -4px);
  }

}


/* =========================================================
   FOOTER
========================================================= */

.service-gallery__footer {
  display: flex;
  justify-content: flex-end;

  margin-top: 55px;
}

.service-gallery__footer a {
  display: inline-flex;

  align-items: center;
  gap: 12px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;

  color: #0f6868;
  text-decoration: none;
}

.service-gallery__footer span {
  font-size: 19px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .service-gallery__grid {
    grid-template-columns:
      1.1fr .8fr .9fr;

    gap: 30px;
  }

  .service-card--small {
    margin-top: 80px;
  }

  .service-card--medium {
    margin-top: 150px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .service-gallery {
    padding:
      65px 20px 80px;
  }

  .service-gallery__header {
    display: block;

    margin-bottom: 50px;
  }

  .service-gallery__title {
    font-size: clamp(34px, 9.5vw, 44px);
  }

  .service-gallery__intro {
    margin-top: 25px;
  }


  /* keep staggered feeling on mobile */

  .service-gallery__grid {
    display: flex;
    flex-direction: column;

    gap: 55px;
  }


  .service-card--large {
    width: 86%;
  }

  .service-card--small {
    width: 66%;

    margin-top: 0;
    margin-left: auto;
  }

  .service-card--medium {
    width: 78%;

    margin-top: 0;
  }


  .service-card--large .service-card__image {
    height: 470px;
  }

  .service-card--small .service-card__image {
    height: 330px;
  }

  .service-card--medium .service-card__image {
    height: 390px;
  }


  .service-card__bottom h3 {
    font-size: 21px;
  }


  .service-gallery__footer {
    justify-content: flex-start;

    margin-top: 55px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .service-gallery {
    padding-left: 16px;
    padding-right: 16px;
  }

  .service-card--large .service-card__image {
    height: 410px;
  }

  .service-card--small .service-card__image {
    height: 280px;
  }

  .service-card--medium .service-card__image {
    height: 330px;
  }

}



/* =========================================================
   INSIGHTS LIST
========================================================= */

.insights-list,
.insights-list * {
  box-sizing: border-box;
}

.insights-list {
  width: 100%;

  padding:
    clamp(80px, 7vw, 110px) clamp(24px, 5vw, 64px) clamp(90px, 8vw, 120px);

  background: #ffffff;
  color: #111;

  overflow: hidden;
}

.insights-list__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.insights-list__header {
  display: grid;

  grid-template-columns:
    minmax(350px, .85fr) minmax(420px, 1.15fr);

  gap: clamp(70px, 10vw, 150px);

  align-items: start;

  padding-bottom:
    clamp(70px, 7vw, 100px);
}


/* LEFT TITLE */

.insights-list__heading {
  display: flex;
  flex-direction: column;

  font-size:
    clamp(46px, 5vw, 72px);

  font-weight: 600;

  line-height: .88;
  letter-spacing: -.055em;

  text-transform: uppercase;
}

.insights-list__heading .muted {
  color: #0F6868;
}


/* RIGHT */

.insights-list__header-right {
  padding-top: 2px;
}

.insights-list__header-right p {
  max-width: 650px;

  margin: 0 0 32px;

  font-size:
    clamp(20px, 2vw, 29px);

  font-weight: 500;

  line-height: 1.25;

  letter-spacing: -.025em;
}


/* HEADER CTA */

.insights-list__main-cta {
  display: inline-flex;

  align-items: center;
  gap: 15px;

  padding:
    15px 22px;

  border-radius: 100px;

  background: #111;
  color: #fff;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: .03em;

  text-decoration: none;

  transition:
    background .35s ease,
    color .35s ease;
}

.insights-list__main-cta span {
  font-size: 18px;
  line-height: 1;
}


/* =========================================================
   ARTICLE
========================================================= */

.insights-list__article {
  display: grid;

  grid-template-columns:
    minmax(340px, .75fr) minmax(520px, 1.25fr);

  gap:
    clamp(50px, 7vw, 100px);

  min-height: 410px;

  padding:
    22px 0;

  border-top:
    1px solid rgba(17, 17, 17, .14);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.insights-list__content {
  display: flex;

  flex-direction: column;

  min-height: 100%;
}


/* CATEGORY / DATE */

.insights-list__date {
  display: block;

  font-size: 11px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: .05em;

  color: rgba(17, 17, 17, .62);
}


/* TEXT AREA */

.insights-list__copy {
  margin-top: auto;

  padding-bottom: 8px;
}

.insights-list__copy h3 {
  max-width: 500px;

  margin: 0;

  font-size:
    clamp(26px, 2.5vw, 38px);

  font-weight: 500;

  line-height: 1.06;

  letter-spacing: -.035em;

  text-transform: uppercase;
}

.insights-list__copy p {
  max-width: 490px;

  margin:
    19px 0 27px;

  font-size: 14px;

  line-height: 1.55;

  color:
    rgba(17, 17, 17, .62);
}


/* =========================================================
   READ MORE
========================================================= */

.insights-list__read {
  display: inline-flex;

  align-items: center;
  gap: 24px;

  padding:
    12px 17px;

  border:
    1px solid rgba(17, 17, 17, .25);

  border-radius: 100px;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: .02em;

  color: #111;

  text-decoration: none;

  transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease;
}

.insights-list__read span {
  font-size: 18px;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   IMAGE
========================================================= */

.insights-list__image {
  position: relative;

  display: block;

  width: 100%;
  height: 365px;

  overflow: hidden;

  background: #ddd;
}

.insights-list__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1);

  transition:
    transform 1s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover) and (pointer:fine) {

  .insights-list__article:hover .insights-list__image img {
    transform: scale(1.035);
  }

  .insights-list__read:hover {
    background: #0f6868;
    border-color: #0f6868;

    color: #fff;
  }

  .insights-list__read:hover span {
    transform: translateX(4px);
  }

  .insights-list__main-cta:hover {
    background: #0f6868;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .insights-list__header {
    grid-template-columns:
      .8fr 1.2fr;

    gap: 50px;
  }

  .insights-list__article {
    grid-template-columns:
      .8fr 1.2fr;

    gap: 40px;

    min-height: 350px;
  }

  .insights-list__image {
    height: 320px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .insights-list {
    padding:
      65px 20px 80px;
  }


  /* HEADER */

  .insights-list__header {
    display: block;

    padding-bottom: 55px;
  }

  .insights-list__heading {
    font-size:
      clamp(42px, 13vw, 58px);
  }

  .insights-list__header-right {
    margin-top: 35px;
  }

  .insights-list__header-right p {
    max-width: 100%;

    margin-bottom: 25px;

    font-size:
      clamp(19px, 5.5vw, 24px);
  }


  /* ARTICLE */

  .insights-list__article {
    display: flex;

    flex-direction: column;

    gap: 28px;

    min-height: 0;

    padding:
      22px 0 55px;
  }

  .insights-list__content {
    min-height: 0;
  }

  .insights-list__copy {
    margin-top: 42px;
    padding-bottom: 0;
  }

  .insights-list__copy h3 {
    font-size:
      clamp(25px, 7vw, 34px);
  }

  .insights-list__copy p {
    margin:
      16px 0 24px;

    font-size: 14px;
  }


  /* IMAGE */

  .insights-list__image {
    order: -1;

    height:
      clamp(260px, 65vw, 360px);
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .insights-list {
    padding-left: 16px;
    padding-right: 16px;
  }

}



/* =========================================================
   INSIGHTS — SCROLL REVEAL
========================================================= */

.insights-list__article {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1);
}

.insights-list__article.is-visible {
  opacity: 1;
  transform: translateY(0);
}




/* =========================================================
   CLEAN AETHEL FOOTER
========================================================= */

.clean-footer,
.clean-footer * {
  box-sizing: border-box;
}

.clean-footer {
  width: 100%;
  min-height: 630px;

  padding:
    28px clamp(28px, 4vw, 64px) 25px;

  background: #073f40;
  color: #fff;

  overflow: hidden;
}

.clean-footer__inner {
  position: relative;

  width: 100%;
  max-width: 1440px;
  min-height: 575px;

  margin: 0 auto;
}


/* =========================================================
   TOP RIGHT AREA
========================================================= */

.clean-footer__top {
  width: 58%;
  margin-left: auto;
}


/* LARGE EMAIL */

.clean-footer__email {
  display: inline-flex;
  align-items: flex-start;

  gap: 15px;

  font-size:
    clamp(32px, 4vw, 58px);

  font-weight: 500;

  line-height: .95;
  letter-spacing: -.045em;

  color: #8fe3c0;

  text-decoration: none;
}

.clean-footer__email span {
  font-size:
    clamp(30px, 3vw, 46px);

  line-height: .75;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   INFORMATION BELOW EMAIL
========================================================= */

.clean-footer__details {
  display: grid;

  grid-template-columns:
    1.4fr .8fr .7fr;

  gap:
    clamp(40px, 6vw, 85px);

  margin-top: 45px;
}


/* CONTACT */

.clean-footer__contact a {
  display: inline-block;

  margin-bottom: 10px;

  font-size: 14px;
  font-weight: 500;

  color: rgba(255, 255, 255, .62);

  text-decoration: none;
}

.clean-footer__contact p {
  max-width: 220px;

  margin: 0;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.55;

  letter-spacing: .025em;

  color: rgba(255, 255, 255, .43);
}


/* =========================================================
   NAV
========================================================= */

.clean-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 8px;
}

.clean-footer__nav a {
  font-size: 12px;
  font-weight: 500;

  line-height: 1.25;

  color: rgba(255, 255, 255, .55);

  text-decoration: none;

  transition:
    color .3s ease,
    transform .35s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   SOCIAL
========================================================= */

.clean-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 9px;
}

.clean-footer__social a {
  font-size: 11px;
  font-weight: 500;

  color: rgba(255, 255, 255, .55);

  text-decoration: none;
}


/* =========================================================
   BOTTOM LEFT BRAND
========================================================= */

.clean-footer__brand {
  position: absolute;

  left: 0;
  bottom: 55px;
}

.clean-footer__logo {
  display: inline-block;

  margin-bottom: 14px;

  font-size:
    clamp(22px, 2.1vw, 31px);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .18em;

  color: rgba(255, 255, 255, .9);

  text-decoration: none;
}

.clean-footer__brand p {
  margin: 0;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.55;

  letter-spacing: .015em;

  color: rgba(255, 255, 255, .55);
}


/* =========================================================
   LEGAL
========================================================= */

.clean-footer__legal {
  position: absolute;

  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;

  gap: 40px;
}

.clean-footer__legal a,
.clean-footer__legal span {
  font-size: 9px;
  font-weight: 600;

  letter-spacing: .07em;

  color: rgba(255, 255, 255, .32);

  text-decoration: none;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover) and (pointer:fine) {

  .clean-footer__email:hover span {
    transform: translate(5px, -5px);
  }

  .clean-footer__nav a:hover {
    color: #fff;
    transform: translateX(4px);
  }

  .clean-footer__contact a:hover,
  .clean-footer__social a:hover {
    color: #fff;
  }

  .clean-footer__legal a:hover {
    color: rgba(255, 255, 255, .8);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:950px) {

  .clean-footer {
    min-height: 600px;
  }

  .clean-footer__top {
    width: 68%;
  }

  .clean-footer__details {
    grid-template-columns:
      1.2fr .8fr;

    row-gap: 35px;
  }

  .clean-footer__social {
    grid-column: 2;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:760px) {

  .clean-footer {
    min-height: auto;

    padding:
      50px 20px 25px;
  }

  .clean-footer__inner {
    min-height: 0;
  }


  /* TOP */

  .clean-footer__top {
    width: 100%;
    margin: 0;
  }

  .clean-footer__email {
    font-size:
      clamp(27px, 8vw, 40px);

    overflow-wrap: anywhere;
  }


  /* DETAILS */

  .clean-footer__details {
    grid-template-columns:
      1fr 1fr;

    gap:
      40px 25px;

    margin-top: 45px;
  }

  .clean-footer__contact {
    grid-column:
      1 / -1;
  }

  .clean-footer__social {
    grid-column: auto;
  }


  /* BRAND */

  .clean-footer__brand {
    position: static;

    margin-top: 100px;
  }


  /* LEGAL */

  .clean-footer__legal {
    position: static;

    justify-content: space-between;

    margin-top: 55px;
    padding-top: 20px;

    border-top:
      1px solid rgba(255, 255, 255, .12);
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

  .clean-footer__details {
    grid-template-columns: 1fr;
  }

  .clean-footer__contact,
  .clean-footer__social {
    grid-column: auto;
  }

  .clean-footer__brand {
    margin-top: 80px;
  }

}



/* =========================================================
   CLEAN FOOTER — REVEAL ANIMATION
========================================================= */

/* EMAIL */
.clean-footer__email {
  opacity: 0;
  transform: translateY(28px);

  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    transform .9s cubic-bezier(.22, 1, .36, 1);
}


/* CONTACT / NAV / SOCIAL */
.clean-footer__contact,
.clean-footer__nav,
.clean-footer__social {
  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.22, 1, .36, 1);
}


/* BRAND */
.clean-footer__brand {
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1);
}


/* LEGAL */
.clean-footer__legal {
  opacity: 0;

  transition:
    opacity .7s ease;
}


/* =========================================================
   ACTIVE STATE
========================================================= */

.clean-footer.is-visible .clean-footer__email {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .08s;
}


.clean-footer.is-visible .clean-footer__contact {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .22s;
}


.clean-footer.is-visible .clean-footer__nav {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .32s;
}


.clean-footer.is-visible .clean-footer__social {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .42s;
}


.clean-footer.is-visible .clean-footer__brand {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .52s;
}


.clean-footer.is-visible .clean-footer__legal {
  opacity: 1;

  transition-delay: .62s;
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .clean-footer__email,
  .clean-footer__contact,
  .clean-footer__nav,
  .clean-footer__social,
  .clean-footer__brand,
  .clean-footer__legal {
    opacity: 1;
    transform: none;
    transition: none;
  }

}



.clean-footer__email {
  position: relative;
}

.clean-footer__email::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -12px;

  width: 100%;
  height: 1px;

  background: rgba(143, 227, 192, .6);

  transform: scaleX(0);
  transform-origin: right center;

  transition:
    transform .65s cubic-bezier(.22, 1, .36, 1);
}

@media (hover:hover) and (pointer:fine) {

  .clean-footer__email:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .clean-footer__email:hover span {
    transform: translate(6px, -6px);
  }

}




/* =========================================================
   HOME INSIGHTS
   RIGHT → LEFT IMAGE MASK REVEAL
   + SUBTLE ZOOM OUT
========================================================= */

.insights-list__image {
  position: relative;
  overflow: hidden;

  /* hidden from the LEFT initially */
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);

  transition:
    clip-path 1.15s cubic-bezier(.22, 1, .36, 1),
    -webkit-clip-path 1.15s cubic-bezier(.22, 1, .36, 1);

  will-change: clip-path;
}


/* IMAGE STARTS SLIGHTLY ZOOMED */

.insights-list__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.07);

  transition:
    transform 1.5s cubic-bezier(.22, 1, .36, 1);

  will-change: transform;
}


/* REVEAL */

.insights-list__article.is-visible .insights-list__image {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.insights-list__article.is-visible .insights-list__image img {
  transform: scale(1);
}


/* HOVER — AFTER REVEAL */

@media (hover: hover) and (pointer: fine) {

  .insights-list__article.is-visible:hover .insights-list__image img {
    transform: scale(1.025);
  }

}


/* MOBILE */

@media (max-width: 760px) {

  .insights-list__image {
    transition-duration: 1s;
  }

  .insights-list__image img {
    transform: scale(1.055);

    transition-duration: 1.35s;
  }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

  .insights-list__image {
    clip-path: none;
    -webkit-clip-path: none;
    transition: none;
  }

  .insights-list__image img,
  .insights-list__article.is-visible .insights-list__image img {
    transform: none;
    transition: none;
  }

}



/* ==========================================
   MARKET CARDS — CLEAN ARROW
   DESKTOP + MOBILE
========================================== */

.market-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 28px;
  height: 28px;

  font-family: Arial, sans-serif;
  font-size: 0;

  color: #0f6868;

  border: 0;
  background: transparent;

  position: relative;
}

/* Draw arrow using CSS, not emoji */
.market-card__arrow::after {
  content: "";

  display: block;

  width: 12px;
  height: 12px;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: translate(-2px, 2px);
}

.market-card__arrow::before {
  content: "";

  position: absolute;

  width: 19px;
  height: 2px;

  background: currentColor;

  transform: rotate(-45deg);
}

/* Mobile */
@media (max-width: 760px) {
  .market-card__arrow {
    width: 28px;
    height: 28px;
    font-size: 0;
  }
}




/* =========================================
   AETHEL REALTY — MOBILE HERO IMAGE
========================================= */

.hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MOBILE */
@media (max-width: 760px) {

  .hero__bg picture {
    width: 100%;
    height: 100%;
  }

  .hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}