
/* ==========================================
   GLOBE BUILDERS — RENT PROPERTY
   Editorial, architectural, premium
========================================== */

.rent-page {
  --rent-gold: var(--gold, #b58a43);
  --rent-ink: var(--ink, #25231f);
  --rent-muted: var(--muted, #77736c);
  --rent-line: var(--line, #ded8cc);
  --rent-paper: var(--paper, #f7f5ef);

  overflow: clip;
  background: var(--rent-paper);
  color: var(--rent-ink);
}

.rent-container {
  width: min(1280px, calc(100% - 80px));
  margin-inline: auto;
}

.rent-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rent-page h1,
.rent-page h2,
.rent-page h3 {
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-weight: 400;
  letter-spacing: -.05em;
}

.rent-page h1 em,
.rent-page h2 em {
  color: var(--rent-gold);
  font-weight: 400;
}

.rent-page .section-kicker {
  margin: 0 0 21px;
  color: var(--rent-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.7;
  text-transform: uppercase;
}


/* HERO */

.rent-hero {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  min-height: 570px;
  padding-left: max(40px, calc((100vw - 1280px) / 2));
  background: var(--rent-paper);
}

.rent-hero-copy {
  align-self: center;
  padding: 65px 43px 40px 0;
}

.rent-hero-copy h1 {
  margin: 0 0 24px;
  font-size: clamp(48px, 5.5vw, 77px);
  line-height: 1.02;
}

.rent-hero-copy h1 em {
  display: block;
  margin-top: 5px;
}

.rent-hero-description {
  max-width: 470px;
  margin: 0 0 28px;
  color: var(--rent-muted);
  font-size: 14px;
  line-height: 1.9;
}

.rent-page .gb-btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 23px;
  border: 1px solid var(--rent-gold);
  border-radius: 0;
  background: var(--rent-gold);
  color: #211d17;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-align: center;
  text-decoration: none;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.rent-page .gb-btn:hover {
  transform: translateY(-2px);
  border-color: var(--rent-ink);
  background: var(--rent-ink);
  color: #fff;
}

.rent-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.rent-secondary-link {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rent-gold);
  color: var(--rent-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
  transition: color .2s ease;
}

.rent-secondary-link:hover {
  color: var(--rent-gold);
}

.rent-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 35px;
  color: var(--rent-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .09em;
}

.rent-hero-note span + span {
  padding-left: 18px;
  border-left: 1px solid var(--rent-line);
}

.rent-hero-visual {
  position: relative;
  min-width: 0;
  min-height: 570px;
  overflow: hidden;
  background: #ded6c9;
}

.rent-hero-visual img {
  object-position: center;
  animation: rentHeroImage 1.1s cubic-bezier(.2,.65,.3,1) both;
  transition: transform 1.1s cubic-bezier(.2,.65,.3,1);
}

.rent-hero-visual:hover img {
  transform: scale(1.035);
}

.rent-photo-caption {
  position: absolute;
  right: 24px;
  bottom: 25px;
  left: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  color: white;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}

.rent-photo-caption span {
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}


/* INTRO */

.rent-intro {
  display: grid;
  grid-template-columns: .32fr 1fr;
  gap: 48px;
  padding-top: 95px;
  padding-bottom: 100px;
}

.rent-intro-label {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-top: 8px;
}

.rent-intro-label > span {
  color: var(--rent-gold);
  font-size: 10px;
  font-weight: 700;
}

.rent-intro-label p {
  margin: 0;
  color: var(--rent-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.rent-intro-content h2 {
  max-width: 850px;
  margin: 0 0 25px;
  font-size: clamp(40px, 5vw, 67px);
  line-height: 1.06;
}

.rent-intro-content h2 em {
  display: block;
}

.rent-intro-content > p {
  max-width: 650px;
  margin: 0;
  color: var(--rent-muted);
  font-size: 13px;
  line-height: 1.95;
}


/* RENTAL OPTIONS */

.rent-options {
  padding: 90px 0 95px;
  background: #eeece5;
}

.rent-options-heading {
  display: grid;
  grid-template-columns: 1fr .65fr;
  align-items: end;
  gap: 48px;
  margin-bottom: 43px;
}

.rent-options-heading h2 {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 63px);
  line-height: 1.06;
}

.rent-options-heading h2 em {
  display: block;
}

.rent-options-heading > p {
  max-width: 440px;
  margin: 0 0 5px;
  color: var(--rent-muted);
  font-size: 13px;
  line-height: 1.9;
}


/* EDITORIAL CATEGORY ROWS */

.rent-category-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 35px;
  row-gap: 52px;
}

.rent-category {
  min-width: 0;
}

.rent-category-image {
  position: relative;
  height: clamp(240px, 29vw, 370px);
  overflow: hidden;
  background: #ded7ca;
}

.rent-category-image img {
  transition: transform .8s cubic-bezier(.2,.65,.3,1);
}

.rent-category:hover .rent-category-image img {
  transform: scale(1.035);
}

.rent-category-image > span {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  background: var(--rent-paper);
  color: var(--rent-gold);
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 20px;
}

.rent-category-copy {
  padding-top: 22px;
}

.rent-category-kicker {
  margin: 0 0 10px;
  color: var(--rent-gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.rent-category-copy h3 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
}

.rent-category-copy > p:not(.rent-category-kicker) {
  max-width: 520px;
  margin: 0;
  color: var(--rent-muted);
  font-size: 12px;
  line-height: 1.9;
}

.rent-category-link {
  display: inline-block;
  margin-top: 21px;
  padding-bottom: 7px;
  color: var(--rent-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  transition: color .2s ease;
}

.rent-category-link:hover {
  color: var(--rent-gold);
}

.rent-availability-note {
  max-width: 800px;
  margin: 43px 0 0;
  color: var(--rent-muted);
  font-size: 11px;
  line-height: 1.85;
}


/* RENTAL DECISION GUIDE */

.rent-guide {
  padding: 95px 0 105px;
}

.rent-guide-heading {
  max-width: 800px;
  margin-bottom: 43px;
}

.rent-guide-heading h2 {
  margin: 0 0 22px;
  font-size: clamp(40px, 4.8vw, 63px);
  line-height: 1.07;
}

.rent-guide-heading h2 em {
  display: block;
}

.rent-guide-heading > p:last-child {
  max-width: 570px;
  margin: 0;
  color: var(--rent-muted);
  font-size: 13px;
  line-height: 1.9;
}

.rent-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 55px;
  row-gap: 0;
}

.rent-guide-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 18px;
  padding: 27px 0;
}

.rent-guide-item > span {
  padding-top: 5px;
  color: var(--rent-gold);
  font-size: 10px;
  font-weight: 700;
}

.rent-guide-item h3 {
  margin: 0 0 9px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.rent-guide-item p {
  max-width: 420px;
  margin: 0;
  color: var(--rent-muted);
  font-size: 12px;
  line-height: 1.9;
}


/* PROCESS */

.rent-process {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: start;
  gap: clamp(40px, 6vw, 80px);
  padding-top: 30px;
  padding-bottom: 110px;
}

.rent-process-image {
  position: relative;
  height: clamp(350px, 42vw, 510px);
  overflow: hidden;
  background: #ded7ca;
}

.rent-process-image img {
  transition: transform .9s ease;
}

.rent-process-image:hover img {
  transform: scale(1.025);
}

.rent-process-image-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 17px 19px;
  background: rgba(247,245,239,.95);
  color: var(--rent-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

.rent-process-copy h2 {
  margin: 0 0 28px;
  font-size: clamp(37px, 4.3vw, 56px);
  line-height: 1.08;
}

.rent-process-copy h2 em {
  display: block;
}

.rent-steps {
  border-top: 1px solid var(--rent-line);
}

.rent-step {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 17px;
  padding: 21px 0;
  border-bottom: 1px solid var(--rent-line);
}

.rent-step > span {
  padding-top: 4px;
  color: var(--rent-gold);
  font-size: 10px;
  font-weight: 700;
}

.rent-step h3 {
  margin: 0 0 8px;
  font-size: 23px;
  letter-spacing: -.03em;
}

.rent-step p {
  max-width: 450px;
  margin: 0;
  color: var(--rent-muted);
  font-size: 12px;
  line-height: 1.85;
}


/* REQUIREMENTS */

.rent-requirements {
  padding: 85px 0;
  background: #eeece5;
}

.rent-requirements-inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(40px, 7vw, 90px);
}

.rent-requirements-copy h2 {
  margin: 0 0 22px;
  font-size: clamp(38px, 4.5vw, 59px);
  line-height: 1.08;
}

.rent-requirements-copy h2 em {
  display: block;
}

.rent-requirements-copy > p:not(.section-kicker) {
  margin: 0 0 25px;
  color: var(--rent-muted);
  font-size: 13px;
  line-height: 1.9;
}

.rent-requirements-image {
  height: clamp(290px, 37vw, 440px);
  overflow: hidden;
  background: #ded7ca;
}

.rent-requirements-image img {
  transition: transform .9s ease;
}

.rent-requirements-image:hover img {
  transform: scale(1.025);
}


/* FINAL CTA — matching homepage */

.rent-page .rent-final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 75px 24px 62px;
  background-color: #191916;
  background-image:
    linear-gradient(rgba(20,19,16,.78), rgba(20,19,16,.78)),
    url("../images/general/contact-architecture.jpg");
  background-position: center 55%;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.rent-page .rent-final-cta .section-kicker {
  margin-bottom: 18px;
}

.rent-page .rent-final-cta h2 {
  margin: 0 auto 20px;
  color: white;
  font-size: clamp(41px, 5.2vw, 67px);
  line-height: 1.04;
}

.rent-page .rent-final-cta h2 em {
  color: var(--rent-gold);
}

.rent-page .rent-final-cta .gb-lead {
  max-width: 590px;
  margin: 0 auto 26px;
  color: rgba(255,255,255,.87);
  font-size: 13px;
  line-height: 1.9;
}

.rent-page .gb-contact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 30px;
}

.rent-page .gb-contact-details a {
  color: #f0e0c4;
  font-size: 11px;
  text-decoration: none;
}

.rent-page .rent-final-address {
  max-width: 850px;
  margin: 24px auto 0;
  color: #c8c0b2;
  font-size: 12px;
  line-height: 1.8;
}


/* MOTION */

.rent-page .rent-reveal {
  opacity: 1;
  transform: none;
}

.rent-page.motion-ready .rent-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.65,.3,1);
  transition-delay: var(--gb-reveal-delay, 0ms);
}

.rent-page.motion-ready .rent-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rent-page .rent-hero-copy > * {
  animation: rentHeroEnter .8s both;
}

.rent-page .rent-hero-copy > *:nth-child(2) {
  animation-delay: .1s;
}

.rent-page .rent-hero-copy > *:nth-child(3) {
  animation-delay: .2s;
}

.rent-page .rent-hero-copy > *:nth-child(4) {
  animation-delay: .3s;
}

@keyframes rentHeroEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rentHeroImage {
  from {
    opacity: .55;
    transform: scale(1.035);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* RESPONSIVE */

@media (max-width: 950px) {
  .rent-container {
    width: calc(100% - 50px);
  }

  .rent-hero {
    padding-left: 25px;
  }

  .rent-hero-copy {
    padding-right: 25px;
  }

  .rent-hero-copy h1 {
    font-size: clamp(42px, 5.2vw, 60px);
  }

  .rent-hero-visual {
    min-height: 500px;
  }

  .rent-category-list {
    column-gap: 24px;
    row-gap: 42px;
  }

  .rent-process {
    gap: 30px;
  }
}

@media (max-width: 700px) {
  .rent-container {
    width: calc(100% - 40px);
  }

  .rent-hero {
    grid-template-columns: 1fr;
    padding: 52px 20px 0;
  }

  .rent-hero-copy {
    padding: 0 0 28px;
  }

  .rent-hero-copy h1 {
    font-size: clamp(43px, 10vw, 61px);
  }

  .rent-hero-description {
    font-size: 13px;
  }

  .rent-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .rent-hero-visual {
    min-height: 0;
    height: 340px;
    margin: 0 -20px;
  }

  .rent-photo-caption {
    right: 15px;
    left: 15px;
    font-size: 8px;
  }

  .rent-hero-note {
    gap: 10px;
    margin-top: 25px;
    font-size: 8px;
  }

  .rent-hero-note span + span {
    padding-left: 10px;
  }

  .rent-intro {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 70px;
    padding-bottom: 75px;
  }

  .rent-intro-content h2,
  .rent-options-heading h2,
  .rent-guide-heading h2,
  .rent-process-copy h2,
  .rent-requirements-copy h2 {
    font-size: clamp(37px, 8.5vw, 51px);
  }

  .rent-options {
    padding: 75px 0 80px;
  }

  .rent-options-heading {
    grid-template-columns: 1fr;
    gap: 17px;
    margin-bottom: 32px;
  }

  .rent-category-list {
    grid-template-columns: 1fr;
    row-gap: 38px;
  }

  .rent-category-image {
    height: clamp(245px, 70vw, 360px);
  }

  .rent-category-copy h3 {
    font-size: 30px;
  }

  .rent-guide {
    padding: 75px 0 80px;
  }

  .rent-guide-grid {
    grid-template-columns: 1fr;
  }

  .rent-guide-item {
    padding: 22px 0;
  }

  .rent-process {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 0;
    padding-bottom: 80px;
  }

  .rent-process-image {
    height: 300px;
  }

  .rent-requirements {
    padding: 70px 0;
  }

  .rent-requirements-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rent-requirements-image {
    height: 300px;
  }

  .rent-page .rent-final-cta {
    padding: 58px 20px 50px;
  }

  .rent-page .rent-final-cta h2 {
    font-size: clamp(37px, 9vw, 50px);
  }

  .rent-page .gb-contact-details {
    flex-direction: column;
    gap: 14px;
  }

  .rent-page .rent-final-address {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rent-page *,
  .rent-page *::before,
  .rent-page *::after {
    animation: none !important;
    transition: none !important;
  }

  .rent-page .rent-reveal,
  .rent-page.motion-ready .rent-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================
   RENT PROPERTY — LAYOUT WIDTH CORRECTION
========================================== */

.rent-page {
  width: 100%;
  max-width: none;
  overflow-x: clip;
}

.rent-page .rent-container {
  display: block;
  width: min(1280px, calc(100% - 80px));
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

/* Rental guide: use the full available width */
.rent-page .rent-guide {
  display: block;
  width: 100%;
}

.rent-page .rent-guide-heading {
  width: 100%;
  max-width: 850px;
}

.rent-page .rent-guide-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 12px;
}

.rent-page .rent-guide-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  width: 100%;
}

.rent-page .rent-guide-item > div {
  min-width: 0;
}

.rent-page .rent-guide-item h3,
.rent-page .rent-guide-item p {
  width: 100%;
  max-width: none;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.rent-page .rent-guide-item p {
  font-size: 13px;
  line-height: 1.85;
}

/* Prevent other sections from shrinking */
.rent-page .rent-options,
.rent-page .rent-process,
.rent-page .rent-requirements {
  width: 100%;
}

.rent-page .rent-category-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .rent-page .rent-container {
    width: calc(100% - 40px);
  }

  .rent-page .rent-guide-grid,
  .rent-page .rent-category-list {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .rent-page .rent-guide-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }
}

/* FIX: Rental guide text was flowing into the number column */

.rent-page .rent-guide-grid > .rent-guide-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.rent-page .rent-guide-grid > .rent-guide-item > span {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.rent-page .rent-guide-grid > .rent-guide-item > h3 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  margin: 0 0 9px;
}

.rent-page .rent-guide-grid > .rent-guide-item > p {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  max-width: 480px;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
  font-size: 13px;
  line-height: 1.85;
}

@media (max-width: 700px) {
  .rent-page .rent-guide-grid > .rent-guide-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }
}
