/* ==========================================================================
   11 Portland Street - landing page
   Figma: 1PS006_Landing_Page / node 8002:12388 (1443px desktop frame)
   ========================================================================== */

/* Brand fonts (licensed). Drop the .woff2 files into assets/fonts/ and they
   take over from the Google Fonts fallbacks automatically. */
@font-face { font-family: "LT Superior Serif"; font-weight: 400; font-display: swap;
  src: local("LT Superior Serif Regular"), local("LTSuperiorSerif-Regular"), url("../assets/fonts/LTSuperiorSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "LT Superior Serif"; font-weight: 500; font-display: swap;
  src: local("LT Superior Serif Medium"), local("LTSuperiorSerif-Medium"), url("../assets/fonts/LTSuperiorSerif-Medium.woff2") format("woff2"); }
@font-face { font-family: "Arbeit Pro"; font-weight: 300; font-display: swap;
  src: local("Arbeit Pro Light"), local("ArbeitPro-Light"), url("../assets/fonts/ArbeitPro-Light.woff2") format("woff2"); }
@font-face { font-family: "Arbeit Pro"; font-weight: 400; font-display: swap;
  src: local("Arbeit Pro Regular"), local("ArbeitPro-Regular"), url("../assets/fonts/ArbeitPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Arbeit Pro"; font-weight: 500; font-display: swap;
  src: local("Arbeit Pro Medium"), local("ArbeitPro-Medium"), url("../assets/fonts/ArbeitPro-Medium.woff2") format("woff2"); }

:root {
  /* Figma variables: Color #00073a, White #fcfaf7 */
  --ink: #00073a;
  --white: #fcfaf7;
  --navy: #00054d;          /* page base */
  --pink: #e9cfe2;          /* spec dots, download icon */
  --blue: #3333ff;          /* intro rule */
  --blue-footer: #3e3ff5;   /* footer rule */
  --dot-active: #898af7;
  --dot: #f5f5f5;
  --maroon: #400808;
  --maroon-line: #6e4b4b;

  --serif: "LT Superior Serif", "Source Serif 4", Georgia, serif;
  --sans: "Arbeit Pro", "Figtree", "Helvetica Neue", Arial, sans-serif;

  /* 1 design px, scaled down proportionally below the 1443px frame width */
  --s: calc(min(100vw, 1443px) / 1443);
  --gutter: max(20px, calc(var(--s) * 38));
  /* side padding that keeps content inside a centred 1443px column */
  --edge: max(var(--gutter), calc(50vw - 1443px / 2 + 38px));
}

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

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 16px; z-index: 100;
  padding: 8px 14px; background: var(--white); color: var(--ink);
  font: 400 15px/1.4 var(--sans); text-decoration: none;
}
.skip-link:focus { left: 16px; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: max(56px, calc(var(--s) * 67));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: max(20px, calc(var(--s) * 35)) max(20px, calc(var(--s) * 37));
  transition: background-color .35s ease;
}
.nav.is-solid { background-color: var(--navy); }
.menu-open .nav { background-color: transparent; }

.nav__brochure {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 14px/24px var(--serif);
  color: var(--white); text-decoration: none;
}
.nav__brochure .icon-download { width: 11.6px; height: 12.6px; color: var(--pink); transform: translateY(-1px); transition: transform .25s ease; }
.nav__brochure:hover .icon-download { transform: translateY(2px); }

.nav__logo { justify-self: center; }
.nav__logo img { width: 180px; height: 12px; }

.nav__toggle {
  justify-self: end;
  padding: 14px 0; border: 0; background: none; cursor: pointer;
}
.nav__toggle img { width: 54px; height: 7px; transition: transform .3s ease; }
.nav__toggle:hover img { transform: scaleX(.8); transform-origin: right; }

/* Menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 15;
  display: flex; flex-direction: column; justify-content: center; gap: 48px;
  padding: 96px var(--edge) 48px;
  background: var(--navy);
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu__list a {
  font: 500 clamp(36px, 5vw, 64px)/1.2 var(--serif);
  color: var(--white); text-decoration: none;
  transition: color .2s ease;
}
.menu__list a:hover { color: var(--pink); }
.menu__downloads { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.menu__downloads a { font: 400 17px/25px var(--serif); color: var(--pink); text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Navy stage (hero, intro, feature) with the brand mark behind
   -------------------------------------------------------------------------- */
.stage { position: relative; overflow: hidden; }
/* Brand mark (vector halftone) over the flat navy base. js/main.js feeds --p,
   the 0-1 scroll progress through the stage, so the mark drifts down slower
   than the page, turns and grows as you scroll. */
.stage__mark {
  position: absolute; top: 0; left: 0; width: 100%;
  pointer-events: none; user-select: none;
  animation: mark-in 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
.stage__mark img {
  width: 100%; max-width: none; height: auto;
  transform-origin: 42% 34%;
  /* Clockwise only: the artwork is cropped at the frame edges, and turning this
     way keeps those cut edges off-screen at every scroll position. */
  transform:
    translate3d(0, calc(var(--p, 0) * 12%), 0)
    rotate(calc(var(--p, 0) * 8deg))
    scale(calc(1 + var(--p, 0) * .15));
  will-change: transform;
}
@keyframes mark-in { from { opacity: 0; transform: scale(.94); } }
.hero, .intro, .feature { position: relative; max-width: 1443px; margin-inline: auto; }

/* Hero */
.hero {
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--s) * 327);
}
.hero__title { margin: 0; width: calc(var(--s) * 678); }
.hero__title img { width: 100%; height: auto; }
.hero__scroll { display: block; margin-top: calc(var(--s) * 256); width: calc(var(--s) * 170); min-width: 120px; }
.hero__scroll img { width: 100%; height: auto; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* Intro */
.intro { padding: calc(var(--s) * 244) var(--gutter) 0; }
.intro__title {
  margin: 0;
  font: 500 clamp(30px, calc(var(--s) * 45), 45px)/1.2 var(--serif);
  color: #fff;
}
.spec {
  list-style: none; margin: calc(var(--s) * 160) 0 0; padding: 0;
  display: flex; justify-content: space-between; align-items: center;
  font: 500 clamp(14px, calc(var(--s) * 19), 19px)/26px var(--sans);
  text-transform: uppercase;
}
.spec__sep img { width: max(10px, calc(var(--s) * 15)); height: auto; aspect-ratio: 15 / 15.327; }
.intro__lede {
  margin: calc(var(--s) * 69) 0 0;
  text-align: right;
  font: 500 clamp(24px, calc(var(--s) * 35), 35px)/1.2857 var(--serif);
  color: #fff;
}
.intro__rule { height: 2px; margin: calc(var(--s) * 11) 0 0; border: 0; background: var(--blue); }

/* Feature carousel */
.feature { padding: calc(var(--s) * 100) var(--gutter) calc(var(--s) * 101); }
.feature__track { display: grid; touch-action: pan-y; }
.slide {
  grid-area: 1 / 1;
  display: grid; align-items: end;
  grid-template-columns: calc(var(--s) * 582) calc(var(--s) * 352);
  column-gap: calc(var(--s) * 67);
  padding-left: calc(var(--s) * 101);
}
.slide__media { margin: 0; aspect-ratio: 582 / 624; border-radius: 8px; overflow: hidden; }
.slide__media img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
}
.slide__media--wide img { object-position: 7% 50%; }
.slide__copy { padding-bottom: calc(var(--s) * 216); color: #fff; }
.slide__title { margin: 0 0 17px; font: 500 19px/26px var(--sans); }
.slide__copy p { margin: 0; font: 400 17px/25px var(--serif); }

/* Slide change (JS only). The incoming slide sits on top and its photo wipes in
   from the side it's travelling from, easing out of a zoom; the outgoing photo
   stays underneath, pushing back and dimming; copy fades out, then the new copy
   rises in line by line. */
.js .slide:not(.is-active):not(.is-leaving) { visibility: hidden; }
.js .slide.is-active { z-index: 2; }
.js .slide.is-leaving { z-index: 1; }

.js .slide .slide__media { clip-path: inset(0 0 0 100% round 8px); }
.js [data-dir="prev"] .slide .slide__media { clip-path: inset(0 100% 0 0 round 8px); }
.js .slide.is-leaving .slide__media { clip-path: inset(0 round 8px); }
.js .slide.is-active .slide__media {
  clip-path: inset(0 round 8px);
  transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1);
}

.js .slide .slide__media img { transform: scale(1.14); }
.js .slide.is-active .slide__media img {
  transform: none;
  transition: transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.js .slide.is-leaving .slide__media img {
  transform: scale(1.06); filter: brightness(.65);
  transition: transform 1.1s cubic-bezier(.77, 0, .18, 1), filter 1.1s ease;
}

.js .slide__copy > * { opacity: 0; transform: translateY(20px); }
.js .slide.is-leaving .slide__copy > * {
  transform: translateY(-12px);
  transition: opacity .35s ease, transform .5s ease;
}
.js .slide.is-active .slide__copy > * {
  opacity: 1; transform: none;
  transition: opacity .7s ease .45s, transform .9s cubic-bezier(.2, .7, .2, 1) .45s;
}
.js .slide.is-active .slide__copy > p { transition-delay: .58s; }

/* Pagination: Figma "Group 19" - six 11.3px dots across 181px */
.feature__dots {
  position: absolute; z-index: 3;
  right: calc(var(--s) * 145); bottom: calc(var(--s) * 124);
  display: flex; gap: 22.66px;
}
.feature__dot {
  position: relative;
  width: 11.3px; height: 11.3px; padding: 0;
  border: 1px solid var(--dot); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background-color .4s ease, border-color .4s ease, transform .4s ease;
}
.feature__dot::after { content: ""; position: absolute; inset: -8px; } /* larger hit area */
.feature__dot:hover { border-color: var(--dot-active); transform: scale(1.15); }
.feature__dot[aria-current="true"] { background: var(--dot-active); border-color: var(--dot-active); }

/* --------------------------------------------------------------------------
   Agents footer
   -------------------------------------------------------------------------- */
.agents {
  background: var(--white); color: var(--ink);
  padding: calc(var(--s) * 53) var(--edge) calc(var(--s) * 48);
}
.agents :focus-visible { outline-color: var(--ink); }

.agents__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.agents__buttons { display: flex; flex-wrap: wrap; gap: max(12px, calc(var(--s) * 31)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 209px; height: 45px;
  border: 1px solid var(--maroon-line); border-radius: 80px;
  background: var(--maroon); color: var(--white);
  font: 400 15px/25px var(--serif); text-decoration: none;
  transition: background-color .2s ease;
}
.btn:hover { background: #5c1010; }
.agents__wordmark { width: max(220px, calc(var(--s) * 346)); height: auto; }

.agents__body {
  display: grid; align-items: end;
  grid-template-columns: max(260px, calc(var(--s) * 295)) max(260px, calc(var(--s) * 295)) 1fr;
  margin-top: calc(var(--s) * 142);
}
.agent { display: grid; grid-template-rows: 91px auto; row-gap: 45px; }
.agent__logo { align-self: end; }
.agent__logo--savills { width: 91px; height: 91px; }
.agent__logo--jll { width: 168px; height: 75px; }
.agent__contacts { display: grid; row-gap: 27px; font: 300 17px/25px var(--sans); font-style: normal; }
.agent__contacts p { margin: 0; }
.agent__contacts a, .agent__name { display: block; text-decoration: none; }
.agent__contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.agent__name { font-weight: 400; }
.agents__rpg { justify-self: end; width: 137px; height: 42px; margin-bottom: 3px; }

.agents__legal {
  display: flex; justify-content: space-between; align-items: end; gap: 32px;
  margin-top: calc(var(--s) * 74);
  padding-top: 26px;
  border-top: 2px solid var(--blue-footer);
  font: 15px/18px var(--sans); color: var(--navy);
}
.agents__disclaimer { max-width: 956px; margin: 0; font-weight: 300; }
.agents__credit { margin: 0; font-weight: 400; white-space: nowrap; }
.agents__credit a { text-decoration: none; }
.agents__credit a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Scroll reveal (only when JS is running; see js/main.js)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__scroll img { animation: none; }
  .stage__mark { animation: none; }
  .stage__mark img { transform: none; }
  .js .slide .slide__media,
  .js .slide .slide__media img,
  .js .slide__copy > * { transition: none !important; }
  .js .slide.is-leaving { visibility: hidden; }
}

/* --------------------------------------------------------------------------
   Tablet / mobile (no mobile frame in Figma - stacked adaptation of desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .nav__logo img { width: 150px; height: 10px; }
  .nav__toggle img { width: 40px; height: 7px; }

  .stage__mark { width: 250vw; left: 50%; translate: -50% 0; }

  .hero { min-height: 100svh; justify-content: center; padding: 80px 20px 120px; }
  .hero__title { width: min(84vw, 520px); }
  /* `translate`, not `transform`: the scroll reveal resets transform on .is-in */
  .hero__scroll { position: absolute; bottom: 40px; left: 50%; margin: 0; translate: -50% 0; }

  .intro { padding-top: 72px; }
  .spec { flex-wrap: wrap; justify-content: flex-start; gap: 12px 14px; margin-top: 40px; }
  .intro__lede { margin-top: 48px; text-align: left; }
  .br-lg { display: none; }
  .intro__rule { margin-top: 24px; }

  .feature { padding-block: 56px 72px; }
  .slide { grid-template-columns: 1fr; align-content: start; padding-left: 0; row-gap: 32px; }
  .slide__copy { padding-bottom: 0; }
  .feature__dots { position: static; margin-top: 32px; }

  .agents { padding-block: 48px 40px; }
  .agents__wordmark { order: -1; width: min(100%, 346px); margin-bottom: 16px; }
  .agents__body { grid-template-columns: 1fr; row-gap: 48px; margin-top: 56px; }
  .agent { grid-template-rows: auto auto; row-gap: 28px; }
  .agents__rpg { justify-self: start; }
  .agents__legal { flex-direction: column; align-items: flex-start; margin-top: 48px; }
  .agents__credit { white-space: normal; }
}