:root {
  --bg: #f7ece4;
  --bg-deep: #f2dfd1;
  --surface: rgba(255, 249, 244, 0.82);
  --surface-strong: rgba(255, 252, 247, 0.96);
  --ink: #231713;
  --ink-soft: #644b3e;
  --accent: #cf7b48;
  --accent-deep: #a8592d;
  --line: rgba(207, 123, 72, 0.24);
  --shadow: 0 26px 60px rgba(77, 45, 26, 0.12);
  --chocolate: #2f1b15;
  --chocolate-soft: #4a2d21;
  --cream-text: #f6e6d8;
  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

:root {
  color-scheme: light; /* stops Chrome on Android from auto-darkening the page */
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(207, 123, 72, 0.14), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.82), transparent 22%),
    linear-gradient(180deg, #fbf3ed 0%, var(--bg) 48%, #f4e2d5 100%);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

[id] {
  scroll-margin-top: 116px;
}

.no-break {
  white-space: nowrap;
}

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

.page-shell {
  width: min(calc(100% - 32px), 1320px);
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top, 0px)) 0 calc(56px + env(safe-area-inset-bottom, 0px));
}

.site-header {
  position: sticky;
  top: max(16px, env(safe-area-inset-top, 0px));
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, var(--max-width));
  margin: 0 auto 28px;
  padding: 16px 22px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(255, 248, 241, 0.78);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px rgba(68, 39, 20, 0.08);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.brand-mark {
  font-size: 28.8px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.brand-mark span {
  color: var(--accent);
}

.brand-logo-image,
.inline-logo-image {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: -0.1em;
}

.brand-logo-image img,
.inline-logo-image img {
  display: block;
  width: auto;
}

.brand-logo-image img {
  height: 42px;
}

.inline-logo-image img {
  height: var(--logo-inline-height, 0.92em);
}

h1 .inline-logo-image {
  --logo-inline-height: 0.52em;
  vertical-align: -0.02em;
}

.logo-sized-heading {
  font-size: 46.4px;
  line-height: 1.06;
}

.logo-sized-heading .inline-logo-image {
  --logo-inline-height: 0.96em;
  vertical-align: -0.16em;
}

.hero-logo-lock {
  white-space: nowrap;
}

.hero-inline-logo {
  margin-right: -0.08em;
}

h2 .inline-logo-image,
h3 .inline-logo-image {
  --logo-inline-height: 0.72em;
}

.hero-question .inline-logo-image {
  --logo-inline-height: 0.9em;
}

.top-strip .inline-logo-image {
  --logo-inline-height: 1.05em;
  vertical-align: -0.22em;
}

.brand-tag {
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: 20px;
  row-gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.site-nav a {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.site-nav a.is-current {
  color: var(--ink);
  font-weight: 700;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.is-current::after {
  transform: scaleX(1);
}

.section-card,
.split-section,
.proof-card,
.contact {
  width: min(100%, var(--max-width));
  margin: 0 auto 28px;
}

.hero,
.highlights,
.process,
.benefits,
.audience-hub {
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(250, 241, 235, 0.92));
  box-shadow: var(--shadow);
}

.hero {
  padding: 44px;
}

.hero-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.summary-card {
  min-height: 160px;
  padding: 22px 22px 24px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 237, 229, 0.92)),
    radial-gradient(circle at top left, rgba(207, 123, 72, 0.12), transparent 38%);
  border: 1px solid rgba(207, 123, 72, 0.12);
}

.summary-label {
  margin: 0 0 14px;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 800;
}

.summary-card h2 {
  margin: 0;
  font-size: 1.26rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.audience-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 6px;
  border: 1px solid rgba(207, 123, 72, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 28px rgba(83, 51, 31, 0.08);
}

.audience-tab {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  min-height: 48px;
  padding: 0 18px;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.audience-tab:hover,
.audience-tab:focus-visible {
  transform: translateY(-1px);
}

.audience-tab[aria-selected="true"],
.audience-tab.is-active {
  background: var(--ink);
  color: #fff8f1;
  box-shadow: 0 12px 20px rgba(35, 23, 19, 0.18);
}

.hero-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 24px;
}

[data-audience-panel][hidden] {
  display: none !important;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.76rem;
  font-weight: 700;
}

.hero-eyebrow {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.hero h1,
.owner-note h2,
.section-copy h2,
.section-heading h2,
.proof-copy h2,
.contact h2 {
  margin: 0;
  line-height: 0.96;
  letter-spacing: -0.04em;
  word-spacing: 0.3cm;
}

.hero h1 {
  max-width: 14ch;
  font-size: 65.2px;
}

.lead,
.section-copy p,
.proof-copy p,
.contact-intro,
.owner-note p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.hero .lead {
  max-width: 58ch;
  margin: 22px 0 26px;
}

.hero-question {
  margin: 24px 0 0;
  color: var(--accent-deep);
  font-size: 1.2rem;
  font-weight: 800;
}

.hero-question + .lead {
  margin-top: 8px;
}

.hero-feature-title {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 700;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-dark {
  background: var(--ink);
  color: #fff6ef;
  box-shadow: 0 18px 28px rgba(27, 18, 14, 0.18);
}

.button-light {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
}

.button-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #df9e70 100%);
  color: #fff;
  box-shadow: 0 16px 28px rgba(207, 123, 72, 0.28);
}

.button-outline {
  border: 1px solid rgba(246, 230, 216, 0.32);
  background: transparent;
  color: #fff8f1;
}

.header-button {
  min-height: 44px;
  padding: 0 18px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.hero-points li {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(207, 123, 72, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.hero-visual {
  position: relative;
  min-height: 620px;
}

.hero-image-wrap,
.contact-visual {
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
}

.hero-image-wrap {
  border-left: 10px solid var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 81% center;
}

.hero-float {
  position: absolute;
  left: -18px;
  bottom: 24px;
  width: min(320px, 72%);
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(39, 22, 16, 0.88);
  color: #fff8f1;
  box-shadow: 0 18px 36px rgba(29, 15, 11, 0.28);
}

.float-label {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  color: #e9b28c;
}

.float-copy {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
}

.owner-note {
  padding: 28px 40px;
}

.owner-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
  gap: 22px;
  align-items: end;
}

.owner-note h2 {
  max-width: 14ch;
  font-size: 47.1px;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: center;
}

.section-copy {
  padding: 12px 12px 12px 6px;
}

.section-copy h2,
.section-heading h2,
.proof-copy h2,
.contact h2 {
  font-size: 48.6px;
}

.section-copy h2 {
  max-width: 12ch;
}

.section-copy p {
  max-width: 56ch;
  margin: 20px 0 0;
}

.board-frame,
.space-card,
.proof-card img {
  margin: 0;
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow);
}

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

.benefits {
  padding: 40px;
}

.section-heading {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.section-heading-wide {
  max-width: 72ch;
}

.section-heading h2 {
  max-width: 15ch;
}

.section-intro {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.8;
}

.highlights,
.process,
.audience-hub {
  padding: 40px;
}

.highlight-grid,
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.about-link-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.highlight-card,
.process-step,
.link-card {
  min-height: 220px;
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 239, 231, 0.9)),
    radial-gradient(circle at 0 0, rgba(207, 123, 72, 0.12), transparent 36%);
  border: 1px solid rgba(207, 123, 72, 0.14);
}

.highlight-index,
.process-number {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.highlight-card h3,
.process-step h3,
.link-card h3 {
  margin: 0 0 12px;
  font-size: 1.28rem;
  line-height: 1.16;
}

.highlight-card p,
.process-step p,
.link-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.8;
}

.link-card {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(77, 45, 26, 0.12);
  border-color: rgba(47, 27, 21, 0.18);
}

.audience-panel {
  display: grid;
  gap: 24px;
}

.audience-panel-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: end;
}

.audience-panel-intro h3 {
  margin: 0;
  max-width: 14ch;
  font-size: 45px;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.audience-panel-intro p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.8;
}

.panel-proof-grid {
  width: 100%;
  margin: 0;
}

.audience-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.benefit-card {
  position: relative;
  min-height: 232px;
  padding: 26px 24px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 239, 231, 0.9)),
    radial-gradient(circle at 0 0, rgba(207, 123, 72, 0.12), transparent 36%);
  border: 1px solid rgba(207, 123, 72, 0.14);
}

.benefit-number {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.benefit-card h3,
.contact-item h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  line-height: 1.1;
}

.benefit-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.8;
}

.proof-grid {
  display: grid;
  width: min(100%, var(--max-width));
  margin: 0 auto 28px;
  gap: 24px;
}

.proof-card {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(320px, 1fr);
  gap: 24px;
  padding: 26px;
  background: rgba(255, 249, 244, 0.86);
}

.proof-card-dark {
  background: linear-gradient(180deg, rgba(47, 27, 21, 0.98), rgba(58, 34, 25, 0.98));
  color: #fff8f2;
}

.proof-card-dark .proof-copy p,
.proof-card-dark .eyebrow {
  color: #efc5a8;
}

.proof-copy {
  align-self: center;
}

.proof-copy h2 {
  max-width: 12ch;
}

.proof-card img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.spaces {
  width: min(100%, var(--max-width));
  margin: 0 auto 28px;
}

.locations {
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(250, 241, 235, 0.92));
  box-shadow: var(--shadow);
}

.location-tags,
.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.location-tags {
  margin: -6px 0 22px;
}

.location-tag,
.contact-tag {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(207, 123, 72, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
}

.locations-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: start;
}

.location-list {
  display: grid;
  gap: 14px;
}

.location-card {
  appearance: none;
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 20px 20px 22px;
  border: 1px solid rgba(207, 123, 72, 0.14);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 239, 231, 0.9)),
    radial-gradient(circle at 0 0, rgba(207, 123, 72, 0.1), transparent 36%);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.location-card:hover,
.location-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(77, 45, 26, 0.12);
}

.location-card.is-active {
  border-color: rgba(47, 27, 21, 0.18);
  background: linear-gradient(180deg, rgba(50, 29, 22, 0.98), rgba(74, 45, 33, 0.96));
  color: #fff8f1;
}

.location-card strong {
  font-size: 1.08rem;
  line-height: 1.2;
}

.location-card span {
  color: inherit;
  opacity: 0.84;
  line-height: 1.6;
}

.location-index {
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 1;
}

.location-card.is-active .location-index {
  color: #efb790;
}

.map-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 252, 247, 0.82);
  border: 1px solid rgba(207, 123, 72, 0.12);
  box-shadow: var(--shadow);
}

.map-status {
  display: grid;
  gap: 8px;
}

.map-status-label {
  margin: 0;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  font-weight: 800;
}

.map-status-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.map-frame {
  overflow: hidden;
  border-radius: 24px;
  min-height: 520px;
  border: 1px solid rgba(207, 123, 72, 0.16);
  background: rgba(255, 255, 255, 0.68);
}

.location-map {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
}

.map-open-link {
  width: fit-content;
}

.space-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
}

.space-card {
  display: grid;
  gap: 0;
}

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

.space-card figcaption {
  padding: 16px 18px 20px;
  background: rgba(255, 252, 247, 0.92);
  color: var(--ink-soft);
  line-height: 1.7;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.78fr);
  gap: 24px;
  padding: 26px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(47, 27, 21, 0.98), rgba(58, 34, 25, 0.96));
  box-shadow: 0 28px 64px rgba(34, 19, 15, 0.24);
  color: #fff8f1;
}

.contact-panel {
  padding: 20px 8px 20px 4px;
}

.contact-copy-panel {
  min-height: 216px;
}

.contact .eyebrow {
  color: #efb790;
}

.contact h2 {
  max-width: 11ch;
}

.contact-intro {
  max-width: 48ch;
  color: rgba(246, 230, 216, 0.78);
  margin: 20px 0 28px;
}

.contact-tags {
  margin: -4px 0 24px;
}

.contact-tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(246, 230, 216, 0.14);
  color: rgba(246, 230, 216, 0.88);
}

.contact-list {
  display: grid;
  gap: 18px;
}

.contact-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(246, 230, 216, 0.12);
}

.contact-item p {
  margin: 0;
  color: rgba(246, 230, 216, 0.86);
  line-height: 1.7;
}

.company-registration {
  font-size: 0.78em;
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #efad81 0%, #d17946 100%);
  color: var(--chocolate);
  font-weight: 800;
}

.cta-row-contact {
  margin-top: 28px;
}

.contact-visual {
  position: relative;
  min-height: 560px;
  border-radius: 28px;
}

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

.contact-with-form {
  grid-template-columns: minmax(0, 0.84fr) minmax(340px, 0.96fr);
}

.inquiry-card {
  align-self: stretch;
  padding: 34px;
  border: 1px solid rgba(207, 123, 72, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(250, 241, 235, 0.96)),
    radial-gradient(circle at top right, rgba(207, 123, 72, 0.14), transparent 34%);
  color: var(--ink);
  box-shadow: 0 22px 54px rgba(34, 19, 15, 0.2);
}

.inquiry-card .eyebrow {
  color: var(--accent-deep);
}

.inquiry-card h2 {
  max-width: 12ch;
  margin: 0;
  font-size: 45.7px;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.inquiry-intro,
.form-note {
  color: var(--ink-soft);
  line-height: 1.7;
}

.inquiry-intro {
  margin: 18px 0 24px;
}

.inquiry-form {
  display: grid;
  gap: 16px;
}

.inquiry-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.inquiry-fieldset legend,
.inquiry-form label {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
}

.inquiry-fieldset legend {
  margin-bottom: 10px;
}

.inquiry-type-grid,
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inquiry-type-option {
  cursor: pointer;
}

.inquiry-type-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.inquiry-type-option span {
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 16px;
  border: 1px solid rgba(207, 123, 72, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.inquiry-type-option strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.inquiry-type-option small {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.inquiry-type-option input:checked + span {
  border-color: rgba(47, 27, 21, 0.22);
  background: linear-gradient(180deg, rgba(50, 29, 22, 0.98), rgba(74, 45, 33, 0.96));
  box-shadow: 0 14px 26px rgba(35, 23, 19, 0.18);
  transform: translateY(-1px);
}

.inquiry-type-option input:checked + span strong,
.inquiry-type-option input:checked + span small {
  color: #fff8f1;
}

.inquiry-type-option input:focus-visible + span,
.inquiry-form input:focus-visible,
.inquiry-form select:focus-visible,
.inquiry-form textarea:focus-visible {
  outline: 3px solid rgba(207, 123, 72, 0.22);
  outline-offset: 3px;
}

.inquiry-form label {
  display: grid;
  gap: 8px;
}

.inquiry-form [hidden] {
  display: none !important;
}

.inquiry-form input:not([type="radio"]):not([type="hidden"]),
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: 1px solid rgba(207, 123, 72, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  padding: 14px 16px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.inquiry-form input:not([type="radio"]):not([type="hidden"]):focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: rgba(168, 89, 45, 0.48);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 4px rgba(207, 123, 72, 0.12);
  outline: none;
}

.inquiry-form textarea {
  resize: vertical;
}

.inquiry-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.inquiry-submit:disabled {
  cursor: wait;
  opacity: 0.78;
}

.form-status {
  min-height: 24px;
  margin: -4px 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.55;
}

.form-status.is-success {
  color: #a8592d;
}

.form-status.is-error {
  color: #9d3929;
}

.form-note {
  margin: -4px 0 0;
  font-size: 0.84rem;
}

.form-honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.site-footer {
  width: min(100%, var(--max-width));
  margin: 30px auto 0;
  color: rgba(100, 75, 62, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 1080px) {
  .site-header {
    border-radius: 28px;
    padding: 16px 18px;
  }

  .site-nav {
    gap: 14px;
    font-size: 0.88rem;
  }

  .hero,
  .hero-panel-grid,
  .hero-summary,
  .split-section,
  .proof-card,
  .contact,
  .audience-panel-intro,
  .locations-grid,
  .highlight-grid,
  .link-grid,
  .process-grid,
  .space-grid,
  .owner-note-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual,
  .contact-visual {
    min-height: 420px;
  }

  .hero-float {
    left: 18px;
  }

  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  html {
    font-size: 15px;
  }

  .page-shell {
    width: min(calc(100% - 20px), 1320px);
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

  .site-header {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    border-radius: 24px;
  }

  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: initial;
    gap: 8px;
  }

  .site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(207, 123, 72, 0.12);
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
  }

  .header-button {
    width: 100%;
  }

  .hero,
  .benefits,
  .highlights,
  .process,
  .audience-hub,
  .locations,
  .proof-card,
  .contact {
    padding: 20px;
    border-radius: 26px;
  }

  .hero h1,
  .owner-note h2,
  .section-copy h2,
  .section-heading h2,
  .proof-copy h2,
  .contact h2,
  .audience-panel-intro h3 {
    max-width: none;
  }

  .audience-tabs {
    display: grid;
    width: 100%;
    border-radius: 22px;
  }

  .audience-tab {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    text-align: center;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual,
  .contact-visual,
  .proof-card img {
    min-height: 300px;
  }

  .summary-card,
  .highlight-card,
  .process-step {
    min-height: 0;
  }

  .map-frame,
  .location-map {
    min-height: 340px;
  }

  .inquiry-type-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .inquiry-card h2 {
    max-width: none;
  }

  .contact-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .contact-badge {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 520px) {
  .page-shell {
    width: min(calc(100% - 16px), 1320px);
  }

  .site-header {
    gap: 12px;
    padding: 14px;
  }

  .brand {
    align-items: center;
    text-align: center;
  }

  .site-nav {
    grid-template-columns: 1fr;
  }

  .site-nav a {
    min-height: 38px;
  }

  .hero,
  .benefits,
  .highlights,
  .process,
  .audience-hub,
  .locations,
  .proof-card,
  .contact {
    padding: 18px;
    border-radius: 22px;
  }

  .hero-visual,
  .contact-visual,
  .proof-card img {
    min-height: 260px;
  }

  .cta-row,
  .cta-row-contact {
    align-items: stretch;
  }

  .button,
  .cta-row-contact .button {
    width: 100%;
  }

  .map-frame,
  .location-map {
    min-height: 300px;
  }
}

/* Editorial direction inspired by the reference site, adapted for Myroomzie. */
:root {
  --forest-deep: #211610;
  --forest: #382217;
  --sage: #f1a06a;
  --paper: #f6eadf;
  --paper-light: #fff8f0;
}

.home-page .top-strip {
  min-height: 38px;
  background: var(--forest-deep);
  color: rgba(255, 248, 240, 0.82);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.home-page .top-strip a {
  color: #f1a06a;
}

.home-page .site-header {
  min-height: 80px;
  padding-block: 17px;
  background: rgba(33, 22, 16, 0.97);
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 248, 240, 0.12);
}

.home-page .hero {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 118px);
  margin-bottom: 110px;
  padding: 100.8px 86.4px 0;
  border-radius: 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 46%, rgba(241, 160, 106, 0.18), transparent 28%),
    radial-gradient(circle at 63% 75%, rgba(207, 123, 72, 0.28), transparent 32%),
    linear-gradient(118deg, #211610 0%, #382217 58%, #5b3726 100%);
}

.home-page .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: 8%;
  width: 835.2px;
  height: 489.6px;
  min-height: 300px;
  border-radius: 48% 52% 42% 58% / 58% 42% 58% 42%;
  background:
    radial-gradient(circle at 35% 38%, rgba(255, 181, 126, 0.52), transparent 24%),
    linear-gradient(135deg, rgba(207, 123, 72, 0.44), rgba(241, 160, 106, 0.2));
  filter: blur(46px);
  opacity: 0.72;
  transform: rotate(-8deg);
  animation: hero-drift 10s ease-in-out infinite alternate;
}

.home-page .hero::after {
  right: 7%;
  bottom: 20%;
  width: 518.4px;
  height: 316.8px;
  border: 1px solid rgba(255, 248, 240, 0.13);
  border-radius: 50%;
  background: transparent;
  filter: none;
  transform: rotate(-14deg);
}

@keyframes hero-drift {
  from { transform: translate3d(-2%, 2%, 0) rotate(-8deg) scale(0.96); }
  to { transform: translate3d(3%, -2%, 0) rotate(-3deg) scale(1.04); }
}

.home-page .hero-panel-grid {
  width: min(100%, 1380px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
  gap: 86.4px;
  align-items: center;
}

.home-page .hero-copy {
  max-width: 850px;
}

.home-page .hero-eyebrow {
  margin-bottom: 24px;
  color: #f1a06a;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

.home-page .hero-intro-layout {
  display: block;
}

.home-page .hero h1 {
  max-width: 11ch;
  font-family: "Manrope", sans-serif;
  font-size: 90.7px;
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.07em;
  text-wrap: balance;
}

.home-page .hero-side-note {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 42px;
  align-items: start;
  max-width: 680px;
  margin-top: 52px;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 248, 240, 0.24);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.home-page .hero-question {
  color: var(--sage);
  font-size: 0.95rem;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-page .hero-side-note .lead {
  margin: 0;
  color: rgba(255, 248, 240, 0.76);
  font-size: 1.08rem;
  line-height: 1.75;
}

.home-page .hero-actions {
  margin-top: 30px;
}

.home-page .hero-actions .button {
  min-width: 148px;
}

.home-page .hero-feature-title {
  margin: 52px 0 0;
  color: rgba(255, 248, 240, 0.54);
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home-page .hero-visual {
  min-height: 590px;
}

.home-page .hero-image-wrap {
  border: 1px solid rgba(255, 248, 240, 0.18);
  border-radius: 220px 220px 32px 32px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.22);
}

.home-page .hero-image-wrap img {
  opacity: 0.86;
  object-position: 76% center;
  filter: saturate(0.72) sepia(0.12) contrast(1.02);
  mix-blend-mode: normal;
}

.home-page .hero-float {
  right: -24px;
  bottom: 34px;
  width: min(340px, calc(100% - 24px));
  padding: 26px 28px;
  border-radius: 2px;
  background: rgba(246, 234, 223, 0.96);
  color: var(--ink);
  backdrop-filter: blur(16px);
}

.home-page .hero-float .float-label {
  color: var(--accent-deep);
}

.home-page .hero-summary {
  width: min(100%, 1380px);
  margin: 92px auto 0;
  padding: 0 0 34px;
}

.owner-services-label {
  position: relative;
  z-index: 1;
  width: min(100%, 1380px);
  margin: 22px auto 0;
  transform: translateY(-74px);
  color: #f1a06a;
  font-family: "Manrope", sans-serif;
  font-size: 15.8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.owner-services-label + .hero-summary {
  margin-top: 12px;
  transform: translateY(-58px);
}

.owner-hero .hero-panel-grid {
  align-items: start;
}

.owner-hero .hero-visual {
  min-height: 520px;
}

.owner-services-label + .hero-summary .summary-card {
  display: grid;
  place-items: center;
  padding: 22px 24px;
  text-align: center;
}

.owner-services-label + .hero-summary .summary-card .summary-label {
  margin: 0;
}

.owner-services-label + .hero-summary a.summary-card {
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.owner-services-label + .hero-summary a.summary-card:hover,
.owner-services-label + .hero-summary a.summary-card:focus-visible {
  border-color: rgba(255, 245, 235, 0.32);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}

.owner-services-label + .hero-summary .summary-label {
  color: var(--cream-text);
  font-size: 15.1px;
}

.owner-services-label + .hero-summary .summary-card h2 {
  font-size: 21.5px;
  line-height: 1.25;
}

.service-section-actions {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.room-types {
  padding: 46px;
}

.room-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.room-type-card {
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(207, 123, 72, 0.34);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255, 250, 244, 0.94), rgba(248, 237, 226, 0.82)),
    linear-gradient(135deg, rgba(207, 123, 72, 0.08), transparent);
}

.room-type-placeholder {
  display: grid;
  min-height: 260px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px dashed rgba(207, 123, 72, 0.38);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(207, 123, 72, 0.14), transparent 32%),
    rgba(255, 245, 235, 0.62);
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.room-type-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 32.6px;
  font-weight: 600;
  line-height: 1.1;
}

.room-type-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.home-page .co-living-features {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 1380px);
  margin: 18px auto 0;
}

.home-page .co-living-features-title {
  position: relative;
  z-index: 1;
  width: min(100%, 1380px);
  margin: 62px auto 0;
  color: var(--cream-text);
  font-family: "Manrope", sans-serif;
  font-size: 24.6px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.home-page .co-living-feature {
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(255, 248, 240, 0.16);
  border-radius: 8px;
  background: rgba(255, 248, 240, 0.08);
}

.home-page .co-living-feature span {
  display: block;
  margin-bottom: 18px;
  color: var(--sage);
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.home-page .co-living-feature h2 {
  margin: 0 0 10px;
  color: var(--cream-text);
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.25;
}

.home-page .co-living-feature p {
  margin: 0;
  color: rgba(255, 248, 240, 0.74);
  font-size: 0.9rem;
  line-height: 1.6;
}

.about-page .hero {
  padding-bottom: 86px;
}

.about-page .co-living-features {
  margin-bottom: 0;
}

.home-page .hero-points {
  margin-top: 24px;
}

.home-page .proof-grid,
.home-page .spaces {
  width: min(calc(100% - 40px), var(--max-width));
  margin-inline: auto;
}

.owner-bottom-actions,
.tenant-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(calc(100% - 40px), var(--max-width));
  margin-inline: auto;
  padding: 46px;
  border: 0;
  background: #050505;
  color: var(--cream-text);
}

.owner-bottom-actions h2,
.tenant-bottom-actions h2 {
  margin: 0;
  color: var(--cream-text);
  font-family: "Manrope", sans-serif;
  font-size: 37.7px;
  font-weight: 500;
  line-height: 1.1;
}

.owner-bottom-actions .eyebrow,
.tenant-bottom-actions .eyebrow {
  color: #f1a06a;
}

.owner-bottom-actions .button-dark,
.tenant-bottom-actions .button-dark {
  background: var(--cream-text);
  color: #050505;
}

.owner-bottom-actions .button-light,
.tenant-bottom-actions .button-light {
  border-color: rgba(255, 245, 235, 0.42);
  background: transparent;
  color: var(--cream-text);
}

.home-page .summary-card {
  padding: 30px 42px 20px;
}

.home-page main > section:not(.hero) {
  margin-bottom: 78px;
}

.home-page .highlights,
.home-page .process,
.home-page .benefits {
  padding: 82px;
  border-radius: 4px;
  box-shadow: none;
}

.home-page .section-heading {
  margin-bottom: 62px;
}

.home-page .choice-eyebrow {
  font-size: 1.64rem;
}

.home-page .choice-intro {
  margin: -22px 0 30px;
  padding-left: 6px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}

.home-page .choice-intro strong {
  font-weight: 800;
}

.home-page .section-heading h2,
.home-page .section-copy h2,
.home-page .contact h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  letter-spacing: -0.065em;
  word-spacing: 0.3cm;
}

.home-page .highlight-card,
.home-page .process-step,
.home-page .benefit-card,
.home-page .link-card {
  position: relative;
  min-height: 250px;
  padding: 30px 6px 26px;
  border: 0;
  border-top: 1px solid rgba(207, 123, 72, 0.32);
  border-radius: 0;
  background: transparent;
}

.home-page .highlight-card h3,
.home-page .process-step h3,
.home-page .benefit-card h3,
.home-page .link-card h3 {
  font-family: "Manrope", sans-serif;
  font-size: 26.8px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.home-page .benefit-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 18px 0 20px;
  border: 1px solid rgba(207, 123, 72, 0.34);
  border-radius: 50%;
  background: rgba(207, 123, 72, 0.12);
  color: var(--accent-deep);
}

.home-page .benefit-icon svg {
  width: 24px;
  height: 24px;
}

.home-page .benefit-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .highlight-card::after,
.home-page .process-step::after,
.home-page .benefit-card::after,
.home-page .link-card::after {
  content: "\2197";
  position: absolute;
  right: 6px;
  top: 24px;
  color: var(--accent);
  font-size: 1.2rem;
}

.home-page .split-section {
  grid-template-columns: minmax(0, 0.68fr) minmax(420px, 1.1fr);
  gap: 82px;
  padding: 82px;
  border-radius: 4px;
  background: var(--paper-light);
  box-shadow: none;
}

.home-page .board-frame {
  border-radius: 2px;
  box-shadow: none;
}

.home-page .process {
  background: var(--forest-deep);
  color: var(--cream-text);
}

.home-page .process .eyebrow,
.home-page .process .process-number {
  color: #f1a06a;
}

.home-page .process .section-heading h2,
.home-page .process .process-step h3 {
  color: var(--cream-text);
}

.home-page .process .process-step {
  border-top-color: rgba(255, 248, 240, 0.22);
}

.home-page .process .process-step p {
  color: rgba(255, 248, 240, 0.68);
}

.home-page .contact {
  border-radius: 4px;
  box-shadow: none;
}

.home-page .contact-visual {
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero::before {
    animation: none;
  }
}

@media (max-width: 1080px) {
  .home-page .hero {
    padding-top: 64px;
  }

  .home-page .hero-panel-grid {
    grid-template-columns: 1fr;
  }

  .home-page .hero h1 {
    max-width: 12ch;
  }

  .home-page .co-living-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .hero-visual {
    min-height: 520px;
  }

  .home-page .split-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .home-page .site-header {
    min-height: auto;
  }

  .home-page .hero {
    width: min(calc(100% - 16px), var(--max-width));
    min-height: auto;
    padding: 38px 22px 0;
    border-radius: 0 0 24px 24px;
  }

  .about-page .hero {
    padding-bottom: 32px;
  }

  .home-page .hero h1 {
    font-size: clamp(45.6px, 13vw, 56.8px);
  }

  .home-page .hero-side-note {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-page .hero-actions .button {
    flex: 1 1 180px;
  }

  .home-page .hero-visual {
    min-height: 400px;
  }

  .home-page .hero-image-wrap {
    border-radius: 140px 140px 16px 16px;
  }

  .home-page .hero-float {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 20px);
    margin: -68px auto 0;
  }

  .home-page .hero-summary {
    margin-top: 38px;
  }

  .home-page .co-living-features {
    grid-template-columns: 1fr;
  }

  .owner-bottom-actions,
  .tenant-bottom-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-page .highlights,
  .home-page .process,
  .home-page .benefits,
  .home-page .split-section,
  .home-page .contact {
    padding: 30px 24px;
    border-radius: 2px;
  }

  .home-page .highlight-card,
  .home-page .process-step,
  .home-page .benefit-card,
  .home-page .link-card {
    min-height: 190px;
  }
}

@media (max-width: 520px) {
  .home-page .site-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-page .site-nav a {
    min-height: 42px;
    padding: 10px 8px;
  }

  .home-page .hero {
    width: 100%;
    padding-inline: 18px;
  }

  .home-page .hero h1 {
    font-size: clamp(45.6px, 13vw, 56.8px);
  }

  .home-page .hero-visual {
    min-height: 330px;
  }

  .home-page .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Concentrix-inspired Myroomzie redesign. */
:root {
  --bg: #f8efe5;
  --bg-deep: #ead8c8;
  --surface: rgba(255, 249, 242, 0.9);
  --surface-strong: #fffaf4;
  --ink: #241711;
  --ink-soft: #6c5142;
  --accent: #cf7b48;
  --accent-deep: #a95f34;
  --green: #cf7b48;
  --green-bright: #f1a06a;
  --line: rgba(207, 123, 72, 0.34);
  --shadow: 0 32px 80px rgba(48, 30, 20, 0.16);
  --chocolate: #211610;
  --chocolate-soft: #382217;
  --cream-text: #fff5eb;
  --max-width: 1220px;
}

html {
  font-size: 14.5px;
}

body {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(207, 123, 72, 0.08) 0%, transparent 28%),
    linear-gradient(180deg, #fff7ef 0%, var(--bg) 46%, var(--bg-deep) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(36, 23, 17, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 23, 17, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
}

.page-shell {
  width: 100%;
  padding: 0 0 calc(56px + env(safe-area-inset-bottom, 0px));
}

.top-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 42px;
  padding: max(8px, env(safe-area-inset-top, 0px)) 24px 8px;
  background: linear-gradient(90deg, var(--chocolate), #a8592d);
  color: #f9dcc6;
  font-size: 0.92rem;
  text-align: center;
}

.top-strip a {
  color: #f2a56d;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 20px 42px;
  border: 0;
  border-radius: 0;
  background: rgba(33, 22, 16, 0.96);
  color: var(--cream-text);
  box-shadow: 0 20px 54px rgba(33, 22, 16, 0.14);
}

.brand {
  gap: 5px;
  color: var(--cream-text);
}

.brand-mark {
  font-family: "Manrope", sans-serif;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark span {
  color: #f09b61;
}

.brand-mark sup {
  position: relative;
  top: -0.55em;
  margin-left: 3px;
  color: rgba(255, 245, 235, 0.78);
  font-size: 0.36em;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand-tag {
  color: rgba(255, 245, 235, 0.7);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
}

.site-nav {
  gap: 32px;
  color: rgba(255, 245, 235, 0.78);
  font-size: 0.94rem;
  font-weight: 600;
}

.site-nav a.is-current,
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--cream-text);
}

.site-nav a::after {
  bottom: -9px;
  height: 2px;
  background: var(--green-bright);
}

.header-button {
  border: 1px solid rgba(255, 245, 235, 0.22);
  background: transparent;
  color: var(--cream-text);
  box-shadow: none;
}

.header-button:hover,
.header-button:focus-visible {
  background: var(--accent);
}

.section-card,
.split-section,
.proof-card,
.contact,
.spaces {
  width: min(calc(100% - 40px), var(--max-width));
  margin: 0 auto 34px;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: min(780px, calc(100vh - 42px));
  padding: 70px 64px;
  border: 0;
  border-radius: 0 0 42px 42px;
  background:
    linear-gradient(118deg, rgba(33, 22, 16, 0.98) 0%, rgba(51, 34, 24, 0.94) 48%, rgba(168, 89, 45, 0.92) 100%),
    linear-gradient(180deg, var(--chocolate), var(--chocolate-soft));
  color: var(--cream-text);
  box-shadow: 0 36px 90px rgba(33, 22, 16, 0.28);
}

.hero::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -26%;
  width: 72%;
  height: 70%;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0%, rgba(207, 123, 72, 0.18) 38%, rgba(207, 123, 72, 0.3) 70%, transparent 100%);
  transform: rotate(-8deg);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-panel-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.66fr);
  gap: 70px;
  align-items: center;
}

.hero-copy {
  max-width: 760px;
}

.hero-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: 28px;
  align-items: end;
}

.eyebrow,
.hero-eyebrow,
.summary-label,
.highlight-index,
.process-number,
.benefit-number,
.map-status-label,
.float-label {
  letter-spacing: 0.12em;
}

.hero .eyebrow {
  color: #efb485;
}

.hero h1,
.owner-note h2,
.section-copy h2,
.section-heading h2,
.proof-copy h2,
.contact h2,
.inquiry-card h2,
.audience-panel-intro h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: 0;
  word-spacing: 0.3cm;
}

.hero h1 {
  max-width: 11ch;
  font-size: 72.5px;
  line-height: 0.98;
  color: var(--cream-text);
}

.lead,
.hero .lead,
.section-copy p,
.proof-copy p,
.contact-intro,
.owner-note p {
  font-size: 17.1px;
  line-height: 1.72;
}

.hero .lead {
  max-width: 52ch;
  color: rgba(255, 245, 235, 0.78);
}

.hero-side-note {
  max-width: 25rem;
  padding: 18px 20px 20px;
  border: 1px solid rgba(255, 245, 235, 0.18);
  border-radius: 24px;
  background: rgba(255, 245, 235, 0.06);
  backdrop-filter: blur(8px);
}

.hero-side-note .lead {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.7;
}

.hero-statement {
  margin-bottom: 8px;
  color: rgba(255, 245, 235, 0.92);
  font-weight: 700;
}

.hero-question {
  margin: 0;
  color: var(--green-bright);
  font-size: 1rem;
  font-weight: 800;
}

.hero-feature-title {
  color: var(--cream-text);
}

.button {
  min-height: 48px;
  border-radius: 999px;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.button-dark {
  background: var(--cream-text);
  color: var(--chocolate);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.22);
}

.button-light {
  border-color: rgba(255, 245, 235, 0.28);
  background: rgba(255, 245, 235, 0.1);
  color: var(--cream-text);
}

.button-accent {
  background: var(--accent);
  color: #fffaf4;
}

.button-outline {
  border-color: rgba(255, 245, 235, 0.34);
}

.hero-points li,
.location-tag,
.contact-tag {
  border-color: rgba(255, 245, 235, 0.18);
  background: rgba(255, 245, 235, 0.1);
  color: rgba(255, 245, 235, 0.82);
}

.hero-visual {
  min-height: 520px;
}

.hero-image-wrap {
  height: 100%;
  border: 1px solid rgba(255, 245, 235, 0.26);
  border-left: 0;
  border-radius: 36px;
  background: rgba(255, 245, 235, 0.08);
  box-shadow: none;
}

.hero-image-wrap img {
  opacity: 0.72;
  filter: saturate(0.9) contrast(1.04);
  mix-blend-mode: screen;
}

.hero-float {
  left: auto;
  right: 26px;
  bottom: 26px;
  width: min(360px, calc(100% - 28px));
  padding: 26px;
  border: 1px solid rgba(255, 245, 235, 0.3);
  border-radius: 34px;
  background: rgba(33, 22, 16, 0.58);
  color: var(--cream-text);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.hero-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 76px;
  border-top: 1px solid rgba(255, 245, 235, 0.18);
}

.summary-card {
  min-height: 0;
  padding: 26px 24px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.summary-card + .summary-card {
  border-left: 1px solid rgba(255, 245, 235, 0.16);
}

.summary-label {
  color: var(--green-bright);
}

.summary-card h2 {
  color: rgba(255, 245, 235, 0.9);
  font-family: "Manrope", sans-serif;
  font-size: 18.6px;
  font-weight: 500;
  letter-spacing: 0;
}

.highlights,
.process,
.benefits,
.audience-hub,
.locations {
  border: 1px solid rgba(207, 123, 72, 0.24);
  border-radius: 42px;
  background: rgba(255, 250, 244, 0.78);
  box-shadow: var(--shadow);
}

.section-heading {
  gap: 12px;
}

.section-heading h2,
.section-copy h2,
.proof-copy h2,
.contact h2 {
  max-width: 16ch;
  color: var(--ink);
  font-size: 80.6px;
  line-height: 0.96;
}

.section-intro,
.highlight-card p,
.process-step p,
.link-card p,
.benefit-card p,
.location-card span {
  color: var(--ink-soft);
}

.highlight-grid,
.process-grid,
.benefit-grid,
.link-grid {
  gap: 22px;
}

.highlight-card,
.process-step,
.link-card,
.benefit-card,
.location-card {
  min-height: 238px;
  padding: 30px;
  border: 1px solid rgba(207, 123, 72, 0.34);
  border-radius: 36px;
  background:
    linear-gradient(145deg, rgba(255, 250, 244, 0.94), rgba(248, 237, 226, 0.82)),
    linear-gradient(135deg, rgba(207, 123, 72, 0.08), transparent);
  box-shadow: none;
}

.highlight-card h3,
.process-step h3,
.link-card h3,
.benefit-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 32.6px;
  font-weight: 600;
  letter-spacing: 0;
}

.highlight-index,
.process-number,
.benefit-number,
.location-index {
  color: var(--accent-deep);
}

.link-card:hover,
.link-card:focus-visible,
.location-card:hover,
.location-card:focus-visible {
  border-color: rgba(207, 123, 72, 0.5);
  box-shadow: 0 24px 50px rgba(48, 30, 20, 0.12);
}

.split-section {
  align-items: stretch;
  padding: 52px;
  border-radius: 42px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.board-frame,
.space-card,
.proof-card img,
.contact-visual {
  border-radius: 36px;
}

.proof-card {
  border: 1px solid rgba(207, 123, 72, 0.24);
  border-radius: 42px;
  background: rgba(255, 250, 244, 0.84);
}

.proof-card-dark,
.contact {
  border: 0;
  background:
    linear-gradient(125deg, rgba(33, 22, 16, 0.98), rgba(54, 34, 24, 0.96) 55%, rgba(168, 89, 45, 0.94));
  color: var(--cream-text);
}

.proof-card-dark .proof-copy h2,
.contact h2 {
  color: var(--cream-text);
}

.proof-card-dark .proof-copy p,
.proof-card-dark .eyebrow,
.contact .eyebrow,
.contact-intro,
.contact-item p {
  color: rgba(255, 245, 235, 0.78);
}

.spaces {
  padding: 52px;
  border-radius: 42px;
  background: rgba(255, 250, 244, 0.82);
  box-shadow: var(--shadow);
}

.space-card {
  border: 1px solid rgba(207, 123, 72, 0.26);
  box-shadow: none;
}

.space-card figcaption {
  color: var(--ink-soft);
}

.space-card img {
  aspect-ratio: 4 / 5;
  min-height: 420px;
}

.space-card-large img {
  aspect-ratio: 16 / 11;
}

.location-tags .location-tag {
  border-color: rgba(207, 123, 72, 0.28);
  background: rgba(255, 250, 244, 0.78);
  color: var(--ink-soft);
}

.location-card.is-active {
  border-color: rgba(255, 245, 235, 0.26);
  background:
    linear-gradient(135deg, rgba(33, 22, 16, 0.98), rgba(168, 89, 45, 0.94));
  color: var(--cream-text);
}

.location-card.is-active span,
.location-card.is-active strong {
  color: rgba(255, 245, 235, 0.9);
  opacity: 1;
}

.map-panel,
.inquiry-card {
  border: 1px solid rgba(207, 123, 72, 0.28);
  border-radius: 36px;
  background: rgba(255, 250, 244, 0.88);
}

.map-panel {
  background: rgba(255, 250, 244, 0.88);
}

.map-panel .button-light {
  border-color: rgba(33, 22, 16, 0.16);
  background: var(--chocolate);
  color: var(--cream-text);
}

.contact {
  border-radius: 42px;
}

.contact-panel {
  padding: 20px;
}

.contact-tag {
  border-color: rgba(255, 245, 235, 0.2);
}

.contact-badge {
  background: var(--accent);
  color: #fffaf4;
}

.inquiry-card label,
.inquiry-fieldset legend {
  color: var(--ink);
}

.contact .inquiry-card h2 {
  color: var(--ink);
}

.contact-page main {
  display: flex;
  min-height: calc(100dvh - 122px);
  align-items: stretch;
}

.contact-page .contact {
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - 122px);
  margin: 0;
  place-items: center;
  grid-template-columns: 1fr;
  padding: 72px 86.4px;
  border-radius: 0;
}

.contact-page .contact-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
  width: min(100%, 1180px);
}

.contact-page .contact-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  max-width: 560px;
  padding: 0;
}

.contact-page .contact h2 {
  max-width: 11ch;
  font-size: 57.6px;
  line-height: 0.98;
}

.contact-page .contact-intro {
  margin-bottom: 32px;
  font-size: 17.1px;
}

.contact-page .contact-list {
  gap: 22px;
}

.contact-page .contact-item {
  min-height: 136px;
  padding: 24px;
  border: 1px solid rgba(246, 230, 216, 0.14);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 245, 235, 0.1), rgba(255, 245, 235, 0.04)),
    radial-gradient(circle at top right, rgba(207, 123, 72, 0.14), transparent 34%);
}

.contact-page .inquiry-card {
  align-self: center;
  justify-self: end;
  width: min(100%, 540px);
  padding: 38px;
  border-color: rgba(246, 230, 216, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 245, 235, 0.1), rgba(255, 245, 235, 0.04)),
    radial-gradient(circle at top right, rgba(207, 123, 72, 0.18), transparent 36%);
  color: #fff8f1;
}

.contact-page .inquiry-card .eyebrow {
  color: #efb790;
}

.contact-page .inquiry-intro,
.contact-page .form-note {
  color: rgba(246, 230, 216, 0.78);
}

.contact-page .inquiry-card label,
.contact-page .inquiry-fieldset legend {
  color: rgba(246, 230, 216, 0.86);
}

.contact-page .contact .inquiry-card h2,
.contact-page .inquiry-type-option strong {
  color: #fff8f1;
}

.contact-page .inquiry-type-option small {
  color: rgba(246, 230, 216, 0.72);
}

.contact-page .inquiry-type-option span {
  border-color: rgba(246, 230, 216, 0.14);
  background: rgba(255, 245, 235, 0.08);
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  border-color: rgba(207, 123, 72, 0.28);
  background: rgba(255, 255, 255, 0.76);
}

.site-footer {
  width: min(calc(100% - 40px), var(--max-width));
  margin: 0 auto;
  color: rgba(36, 23, 17, 0.58);
}

@media (max-width: 1080px) {
  .hero {
    min-height: auto;
  }

  .hero-panel-grid,
  .proof-card,
  .contact,
  .split-section,
  .locations-grid,
  .room-type-grid,
  .space-grid {
    grid-template-columns: 1fr;
  }

  .contact-page main {
    display: block;
    min-height: 0;
  }

  .contact-page .contact {
    min-height: 0;
    border-radius: 0;
  }

  .contact-page .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-list {
    grid-template-columns: 1fr;
  }

  .about-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-intro-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .hero h1 {
    max-width: 12ch;
  }

  .hero-visual {
    min-height: 440px;
  }
}

@media (max-width: 780px) {
  .top-strip {
    flex-direction: column;
    gap: 4px;
    padding-inline: 16px;
    font-size: 0.86rem;
  }

  .site-header {
    position: static;
    padding: 18px 16px;
  }

  .brand {
    align-items: center;
    text-align: center;
  }

  .site-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav a {
    border-color: rgba(255, 245, 235, 0.18);
    background: rgba(255, 245, 235, 0.08);
    color: rgba(255, 245, 235, 0.84);
  }

  .site-nav a.is-current {
    background: rgba(207, 123, 72, 0.22);
  }

  .section-card,
  .split-section,
  .proof-card,
  .contact,
  .spaces {
    width: min(calc(100% - 24px), var(--max-width));
  }

  .hero,
  .benefits,
  .highlights,
  .process,
  .audience-hub,
  .locations,
  .proof-card,
  .contact,
  .spaces,
  .split-section {
    padding: 22px;
    border-radius: 28px;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(38.6px, 11vw, 48px);
    line-height: 1;
  }

  .hero-side-note {
    max-width: none;
    padding: 16px 18px 18px;
  }

  .section-heading h2,
  .section-copy h2,
  .proof-copy h2,
  .contact h2,
  .inquiry-card h2 {
    font-size: clamp(42.1px, 12vw, 52.4px);
    line-height: 1;
  }

  .hero-summary,
  .highlight-grid,
  .process-grid,
  .benefit-grid,
  .link-grid {
    grid-template-columns: 1fr;
  }

  .about-link-grid {
    grid-template-columns: 1fr;
  }

  .summary-card {
    padding: 22px 0;
  }

  .summary-card + .summary-card {
    border-top: 1px solid rgba(255, 245, 235, 0.16);
    border-left: 0;
  }

  .hero-visual,
  .contact-visual,
  .proof-card img {
    min-height: 320px;
  }

  .hero-float {
    position: static;
    width: 100%;
    margin-top: 14px;
  }
}

@media (max-width: 520px) {
  html {
    font-size: 14px;
  }

  .site-nav {
    grid-template-columns: 1fr;
  }

  .hero,
  .benefits,
  .highlights,
  .process,
  .audience-hub,
  .locations,
  .proof-card,
  .contact,
  .spaces,
  .split-section {
    width: min(calc(100% - 18px), var(--max-width));
    padding: 18px;
    border-radius: 24px;
  }

  .hero-visual,
  .contact-visual,
  .proof-card img {
    min-height: 260px;
  }
}

/* Owner hero: three solutions with icons */
.hero-solutions {
  display: grid;
  gap: 14px;
  max-width: 58ch;
  margin: 4px 0 24px;
  padding: 0;
  list-style: none;
}

.hero-solution {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid rgba(255, 245, 235, 0.16);
  border-radius: 20px;
  background: rgba(255, 245, 235, 0.06);
}

.hero-solution-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(241, 160, 106, 0.5);
  border-radius: 50%;
  background: rgba(207, 123, 72, 0.16);
  color: #f1a06a;
}

.hero-solution-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-solution h3 {
  margin: 0 0 4px;
  color: var(--cream-text);
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.hero-solution p {
  margin: 0;
  color: rgba(255, 245, 235, 0.78);
  font-size: 0.95rem;
  line-height: 1.6;
}

.hero-solutions-note {
  max-width: 58ch;
  margin: 0 0 26px;
  color: rgba(255, 245, 235, 0.78);
}

@media (max-width: 520px) {
  .hero-solution {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .hero-solution-icon {
    width: 40px;
    height: 40px;
  }
}

/* Owner hero: intro text in place of the picture */
.owner-hero .hero-visual-text {
  display: grid;
  align-items: center;
  align-self: center;
  min-height: 0;
}

.owner-hero .hero-intro-note {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 34px;
  border: 1px solid rgba(255, 245, 235, 0.18);
  border-radius: 24px;
  background: rgba(255, 245, 235, 0.06);
  backdrop-filter: blur(8px);
}

.owner-hero .hero-intro-note .lead {
  max-width: none;
  margin: 0;
  color: rgba(255, 245, 235, 0.86);
  font-size: 1.08rem;
  line-height: 1.75;
}

.owner-hero .hero-intro-note .lead + .lead {
  margin-top: 16px;
}

.owner-hero .hero-intro-note .hero-intro-open {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 245, 235, 0.16);
  color: var(--cream-text);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.owner-hero .hero-intro-note strong {
  color: #f1a06a;
  font-weight: 700;
}

.owner-hero .hero-intro-note .lead.hero-intro-close {
  margin-top: 28px;
  color: var(--cream-text);
  font-weight: 500;
}

/* Owner hero: services block anchored to the bottom of the card */
.home-page .owner-hero {
  display: flex;
  flex-direction: column;
  padding-bottom: 44px;
}

.home-page .owner-hero .hero-panel-grid {
  flex: 0 0 auto;
}

.home-page .owner-hero .owner-services-label {
  margin-top: auto;
  padding-top: 64px;
  transform: none;
}

.home-page .owner-hero .owner-services-label + .hero-summary {
  margin-top: 36px;
  padding-bottom: 0;
  transform: none;
}

/* Header tagline under the logo */
.brand {
  align-items: center;
}

.brand-tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  /* centre on the wordmark letters, ignoring the small TM at the right of the image */
  transform: translateX(-3.5px);
  color: rgba(255, 245, 235, 0.78);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
}

.brand-tagline::before,
.brand-tagline::after {
  content: "";
  flex: 0 0 22px;
  /* width as well as flex-basis: Safari sizes the tagline without the basis, pushing the text right */
  width: 22px;
  height: 1px;
  background: rgba(241, 160, 106, 0.75);
}

@media (max-width: 520px) {
  .brand-tagline {
    font-size: 0.64rem;
    gap: 8px;
  }

  .brand-tagline::before,
  .brand-tagline::after {
    flex-basis: 18px;
    width: 18px;
  }
}

/* Owner hero headline: a little more room between lines so descenders don't touch */
.home-page .owner-hero h1 {
  line-height: 1.04;
}

/* Renters page: WhatsApp button under the room-type cards */
.room-types-cta {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.room-types-cta-button {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 0;
  min-width: min(100%, 360px);
  padding: 15px 48px 14px;
  border: 1px solid rgba(255, 245, 235, 0.14);
  background: #171110;
  color: #fff8f1;
  box-shadow: 0 14px 30px rgba(23, 17, 16, 0.28);
  line-height: 1.15;
  text-align: center;
}

.room-types-cta-button:hover,
.room-types-cta-button:focus-visible {
  background: #231713;
  color: #fff8f1;
}

.room-types-cta-title {
  font-size: 1rem;
  font-weight: 700;
}

.room-types-cta-sub {
  color: #f1a06a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Contact page: WhatsApp button under the intro */
.contact-whatsapp-cta {
  margin: 4px 0 26px;
}

/* About page hero: lift the headline block */
@media (min-width: 1081px) {
  .about-page .hero-copy {
    align-self: start;
    padding-top: 40px;
  }
}

@media (max-width: 520px) {
  .about-page .hero {
    padding-top: 26px;
  }
}

/* About page: slightly larger "What are we?" block */
.about-page .hero-question {
  font-size: 1.08rem;
}

.about-page .hero-side-note .lead {
  font-size: 1.22rem;
  line-height: 1.7;
}

/* About page: slightly larger key-feature cards text */
.about-page .co-living-feature span {
  font-size: 0.85rem;
}

.about-page .co-living-feature h2 {
  font-size: 1.18rem;
}

.about-page .co-living-feature p {
  font-size: 1.04rem;
  line-height: 1.65;
}

/* About page hero: living room photo */
.about-page .hero-visual {
  margin-top: -40px;
}

.about-page .hero-image-wrap {
  max-width: 88%;
  margin: 0 auto;
}

@media (min-width: 1081px) {
  .about-page .hero-visual {
    min-height: 520px;
  }
}

@media (max-width: 520px) {
  .about-page .hero-visual {
    min-height: 400px;
  }
}

.about-page .hero-image-wrap img {
  opacity: 0.96;
  object-position: 55% center;
  filter: saturate(0.92) sepia(0.05) contrast(1.03);
}

@media (max-width: 520px) {
  .about-page .co-living-features-title {
    margin-top: 12px;
  }
}

/* Real room photos in hero frames: keep their natural warmth */
.home-page .hero-image-wrap img.hero-photo {
  opacity: 0.96;
  object-position: 60% center;
  filter: saturate(0.92) sepia(0.05) contrast(1.03);
}

/* Compact hero photo (same sizing as the About page photo) */
.hero-visual-compact .hero-image-wrap {
  max-width: 88%;
  margin: 0 auto;
}

@media (min-width: 1081px) {
  .home-page .hero-visual-compact {
    min-height: 520px;
  }
}

@media (max-width: 520px) {
  .home-page .hero-visual-compact {
    min-height: 400px;
  }
}

/* Room type cards: real photos in place of the placeholders */
.room-type-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
  border: 1px solid rgba(207, 123, 72, 0.22);
  border-radius: 24px;
  object-fit: cover;
}

/* Room types: larger section, photos, and text */
.room-types {
  width: min(100%, 1380px);
  margin-left: auto;
  margin-right: auto;
  padding: 54px;
}

.room-type-grid {
  gap: 26px;
}

.room-type-card {
  padding: 22px;
}

.room-type-photo {
  aspect-ratio: 3 / 4;
  margin-bottom: 20px;
}

.room-type-card h3 {
  font-size: 37px;
}

.room-type-card p {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Room types heading: let it wrap to two lines on desktop */
.room-types .section-heading-wide {
  max-width: none;
}

/* Room types: pull the section and its heading up */
.room-types {
  margin-top: -28px;
  padding-top: 30px;
}

/* Room types heading: smaller, single line on desktop, label beneath */
.room-types .section-heading h2 {
  max-width: none;
  font-size: 43.5px;
  line-height: 1.1;
  word-spacing: 0.1cm;
}

.room-types .section-heading .eyebrow {
  margin: 8px 0 0;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
}

/* Room types: dark brown panel like the process section */
.home-page .room-types {
  border: 1px solid rgba(255, 245, 235, 0.1);
  border-radius: 42px;
  background:
    radial-gradient(circle at 85% 0%, rgba(207, 123, 72, 0.22), transparent 34%),
    #4a2d21;
  color: var(--cream-text);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}

.home-page .room-types .section-heading h2 {
  color: var(--cream-text);
}

.home-page .room-types .eyebrow {
  color: #f1a06a;
}

.home-page .room-types .room-type-card {
  border-color: rgba(255, 245, 235, 0.22);
}

.home-page .room-types .room-types-cta-button {
  background: #fff8f1;
  color: var(--ink);
  border-color: rgba(255, 245, 235, 0.4);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.home-page .room-types .room-types-cta-button:hover,
.home-page .room-types .room-types-cta-button:focus-visible {
  background: #ffffff;
  color: var(--ink);
}

.home-page .room-types .room-types-cta-sub {
  color: var(--accent-deep);
}

/* Owners page: service section headings, smaller and on two lines */
#rent-to-rent .section-heading-wide,
#management-service .section-heading-wide,
#sell-us-your-home .section-heading-wide {
  max-width: 700px;
}

#rent-to-rent .section-heading h2,
#management-service .section-heading h2,
#sell-us-your-home .section-heading h2 {
  max-width: none;
  font-size: 45px;
  line-height: 1.1;
  word-spacing: 0.1cm;
}

/* Co-living spaces: single-photo grid for the shared spaces section */
.space-grid-single {
  grid-template-columns: minmax(0, 620px);
}

.space-grid-single .space-card {
  aspect-ratio: 4 / 5;
}

/* Co-living spaces: six-photo bedroom gallery with smaller, equal cards */
.space-grid-bedrooms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.space-grid-bedrooms .space-card {
  border-radius: 28px;
}

.space-grid-bedrooms .space-card img {
  aspect-ratio: 3 / 4;
  min-height: 0;
}

@media (max-width: 780px) {
  .space-grid-bedrooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 520px) {
  .space-grid-bedrooms {
    grid-template-columns: 1fr;
  }
}

/* Hero photos that should show in natural colour */
.home-page .hero-image-wrap img.hero-photo-natural {
  opacity: 1;
  /* slightly warmer colour temperature, lifted a touch */
  filter: sepia(0.12) saturate(1.08) brightness(1.12);
  mix-blend-mode: normal;
  object-position: 55% center;
}

/* Renters hero: short tagline under the headline */
.home-page .hero-tagline {
  margin: 22px 0 0;
  color: #f1a06a;
  font-family: "Manrope", sans-serif;
  font-size: 17.4px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.home-page .hero-tagline-dot {
  margin: 0 0.45em;
  color: rgba(255, 245, 235, 0.55);
}

/* Scroll cue: thick line with a glowing pulse and an arrowhead, bottom-right */
.scroll-cue {
  position: fixed;
  right: 46.1px;
  bottom: clamp(24px, 4vh, 44px);
  z-index: 25;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f1a06a;
  cursor: pointer;
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    visibility 0s linear 0s;
}

.scroll-cue.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    visibility 0s linear 320ms;
}


.scroll-cue-line {
  position: relative;
  display: block;
  width: 2px;
  height: 104px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 245, 235, 0.55);
}

.scroll-cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 240, 225, 0), #fff8f1);
  box-shadow: 0 0 24px 4px rgba(255, 205, 160, 1), 0 0 8px 1px #fff8f1;
  animation: scroll-cue-travel 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes scroll-cue-travel {
  0% { transform: translateY(-40px); }
  100% { transform: translateY(104px); }
}

/* arrowhead under the line */
.scroll-cue::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  border-right: 2px solid #f1a06a;
  border-bottom: 2px solid #f1a06a;
  transform: rotate(45deg);
  animation: scroll-cue-bob 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(5px) rotate(45deg); }
}


.scroll-cue:focus-visible {
  outline: 2px solid #f1a06a;
  outline-offset: 10px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-line::after,
  .scroll-cue::after {
    animation: none;
  }

  .scroll-cue-line::after {
    top: auto;
    bottom: 0;
  }
}

@media (max-width: 520px) {
  .scroll-cue {
    right: 16px;
    bottom: 18px;
    gap: 10px;
  }


  .scroll-cue-line {
    height: 64px;
  }

  .scroll-cue::after {
    width: 10px;
    height: 10px;
    margin-top: -8px;
  }

  @keyframes scroll-cue-travel {
    0% { transform: translateY(-40px); }
    100% { transform: translateY(64px); }
  }
}

/* Headings that need more space between their lines */
.home-page .section-heading h2.heading-airy {
  line-height: 1.18;
}

/* ------------------------------------------------------------------
   Dark brown page theme.
   The page background behind the sections is warm dark brown. The
   top strip, header and hero keep their own colours, and the section
   panels stay white with their original text colours.
   ------------------------------------------------------------------ */
:root {
  --brown-page: #74503c;
  --brown-page-deep: #674634;
}

.home-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(207, 123, 72, 0.16), transparent 30%),
    radial-gradient(circle at 88% 70%, rgba(241, 160, 106, 0.1), transparent 28%),
    linear-gradient(180deg, var(--brown-page) 0%, #7a553f 50%, var(--brown-page-deep) 100%);
}

.home-page::before {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 245, 235, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 245, 235, 0.08) 1px, transparent 1px);
}

/* White section panels: solid so they read clean against the brown */
.home-page .highlights,
.home-page .benefits,
.home-page .audience-hub,
.home-page .locations,
.home-page .spaces {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, #fffcf8 0%, #fff6ee 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}

/* Footer sits on the brown page background */
.home-page .site-footer {
  color: rgba(255, 245, 235, 0.55);
}

/* About page link cards: pop out with a brown frame on hover */
.home-page .about-link-grid .link-card {
  isolation: isolate;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.home-page .about-link-grid .link-card::before {
  content: "";
  position: absolute;
  inset: 0 -14px -8px;
  z-index: -1;
  border: 0;
  border-radius: 0;
  background: #382217;
  box-shadow: 0 14px 30px rgba(48, 30, 20, 0.1);
  opacity: 0;
  transform: scale(0.99);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.home-page .about-link-grid .link-card:hover,
.home-page .about-link-grid .link-card:focus-visible {
  z-index: 2;
  border-top-color: rgba(207, 123, 72, 0.32);
  box-shadow: none;
  transform: none;
}

.home-page .about-link-grid .link-card:hover::before,
.home-page .about-link-grid .link-card:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .home-page .about-link-grid .link-card:hover,
  .home-page .about-link-grid .link-card:focus-visible {
    transform: none;
  }
}

@media (max-width: 520px) {
  .home-page .choice-intro {
    margin: -4px 0 24px;
  }
}

/* Owners page: larger service labels above the three section headings */
#rent-to-rent .section-heading .eyebrow,
#management-service .section-heading .eyebrow,
#sell-us-your-home .section-heading .eyebrow {
  margin-bottom: 16px;
  font-size: 20.3px;
  letter-spacing: 0;
}

/* Owner service tabs: arrow like the About page cards */
.home-page .owner-hero .hero-summary a.summary-card {
  position: relative;
}

.home-page .owner-hero .hero-summary a.summary-card::after {
  content: "\2197";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 520px) {
  .home-page .owner-hero .hero-summary a.summary-card::after {
    right: 12px;
  }
}

/* Owner service tabs: white fill on hover */
.home-page .owner-hero .hero-summary a.summary-card {
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.home-page .owner-hero .hero-summary a.summary-card .summary-label {
  transition: color 200ms ease;
}

.home-page .owner-hero .hero-summary a.summary-card:hover,
.home-page .owner-hero .hero-summary a.summary-card:focus-visible {
  background: #fff8f1;
  box-shadow: none;
  transform: none;
}

.home-page .owner-hero .hero-summary a.summary-card:hover .summary-label,
.home-page .owner-hero .hero-summary a.summary-card:focus-visible .summary-label {
  color: var(--ink);
}

/* Owners page, "Why Lease To Us?" section: no corner arrows on the cards */
#rent-to-rent .benefit-card::after {
  content: none;
}

/* Owners page: no corner arrows on the "Why Lease To Us?" cards */
#rent-to-rent .benefit-card::after {
  content: none;
}

/* Owners page service cards (Rent To Rent, Management service, Sell us your home): number left and icon right on one row, then heading, then text;
   rows stay aligned across the cards in each row */
#rent-to-rent .benefit-card,
#management-service .benefit-card,
#sell-us-your-home .benefit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 12px;
}

#rent-to-rent .benefit-card .benefit-number,
#management-service .benefit-card .benefit-number,
#sell-us-your-home .benefit-card .benefit-number {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

#rent-to-rent .benefit-card .benefit-icon,
#management-service .benefit-card .benefit-icon,
#sell-us-your-home .benefit-card .benefit-icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0 0 18px;
}

#rent-to-rent .benefit-card h3,
#management-service .benefit-card h3,
#sell-us-your-home .benefit-card h3 {
  grid-column: 1 / -1;
  grid-row: 2;
}

#rent-to-rent .benefit-card p,
#management-service .benefit-card p,
#sell-us-your-home .benefit-card p {
  grid-column: 1 / -1;
  grid-row: 3;
}

@supports (grid-template-rows: subgrid) {
  #rent-to-rent .benefit-card,
#management-service .benefit-card,
#sell-us-your-home .benefit-card {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

@supports not (grid-template-rows: subgrid) {
  #rent-to-rent .benefit-card h3,
#management-service .benefit-card h3,
#sell-us-your-home .benefit-card h3 {
    min-height: 2.2em;
  }
}

/* Top strip: tighter spacing between the text and the link */
.top-strip {
  gap: 6px;
  line-height: 1.25;
}

@media (max-width: 780px) {
  .top-strip {
    gap: 0;
  }
}

/* Room types: heading sits above the photo */
.room-type-card h3 {
  margin-bottom: 0;
}

.room-type-card {
  padding-top: 12px;
}

/* Room types: "See more details" button and pop-up */
.room-details-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 11px 22px;
  border: 1px solid rgba(207, 123, 72, 0.6);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-deep);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.room-details-button:hover,
.room-details-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff8f1;
}

.room-modal {
  width: min(92vw, 460px);
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--cream-text);
}

.room-modal::backdrop {
  background: rgba(23, 17, 16, 0.68);
  backdrop-filter: blur(6px);
}

.room-modal-card {
  position: relative;
  padding: 36px;
  border: 1px solid rgba(255, 245, 235, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 0%, rgba(207, 123, 72, 0.22), transparent 34%),
    #4a2d21;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.room-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 245, 235, 0.22);
  border-radius: 50%;
  background: rgba(255, 245, 235, 0.06);
  color: var(--cream-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.room-modal-close:hover,
.room-modal-close:focus-visible {
  border-color: #f1a06a;
  color: #f1a06a;
}

.room-modal-eyebrow {
  margin: 0 0 8px;
  color: #f1a06a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.room-modal h3 {
  margin: 0 0 16px;
  color: var(--cream-text);
  font-family: "Manrope", sans-serif;
  font-size: 31.9px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.room-modal-facts {
  margin: 0 0 16px;
}

.room-modal-facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 245, 235, 0.14);
}

.room-modal-facts dt {
  color: rgba(255, 245, 235, 0.72);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-modal-facts dd {
  margin: 0;
  color: #f1a06a;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: right;
}

.room-modal-note {
  margin: 0 0 20px;
  color: rgba(255, 245, 235, 0.84);
  line-height: 1.7;
}

.room-modal-note:empty {
  display: none;
}

.room-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.room-modal-secondary {
  border: 1px solid rgba(255, 245, 235, 0.3);
  background: transparent;
  color: var(--cream-text);
  cursor: pointer;
}

/* Room types: keep the "See more details" buttons on one line across the cards */
.room-type-card {
  display: flex;
  flex-direction: column;
}

.room-type-card p {
  margin-bottom: 16px;
}

.room-type-card .room-details-button {
  margin-top: auto;
  align-self: flex-start;
}

/* Room pop-up: rent and size values centred in one shared column */
.room-modal-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 0;
}

.room-modal-facts div {
  display: contents;
}

.room-modal-facts dt,
.room-modal-facts dd {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 245, 235, 0.14);
}

.room-modal-facts dd {
  padding-left: 24px;
  text-align: center;
}

/* Room types CTA: larger wording, same pill size */
.room-types-cta-button {
  padding: 11px 48px 10px;
}

.room-types-cta-title {
  font-size: 1.32rem;
  letter-spacing: -0.01em;
}

/* Renters page: no corner arrows on the "Why people love to rent from us?" cards */
.renters-page .highlights .benefit-card::after {
  content: none;
}

/* About page cards: light text while the dark brown hover fill is showing */
.home-page .about-link-grid .link-card h3,
.home-page .about-link-grid .link-card p,
.home-page .about-link-grid .link-card .highlight-index,
.home-page .about-link-grid .link-card::after {
  transition: color 220ms ease;
}

.home-page .about-link-grid .link-card:hover h3,
.home-page .about-link-grid .link-card:focus-visible h3 {
  color: #fff5eb;
}

.home-page .about-link-grid .link-card:hover p,
.home-page .about-link-grid .link-card:focus-visible p {
  color: rgba(255, 245, 235, 0.82);
}

.home-page .about-link-grid .link-card:hover .highlight-index,
.home-page .about-link-grid .link-card:focus-visible .highlight-index,
.home-page .about-link-grid .link-card:hover::after,
.home-page .about-link-grid .link-card:focus-visible::after {
  color: #f1a06a;
}

/* Owners page: no corner arrows on the "Why Trust Us to Manage Your Rental Property?" cards */
#management-service .benefit-card::after {
  content: none;
}

/* Owners page: no corner arrows on the "Sell us your home" cards */
#sell-us-your-home .benefit-card::after {
  content: none;
}

/* Renters: "Ask now" button under the three steps */
.process-cta {
  justify-content: center;
  margin-top: 34px;
}

.home-page .process-cta .button {
  min-height: 62px;
  padding: 0 48px;
  font-size: 1.15rem;
}

/* Co-living page headline: one sentence per line */
.home-page .hero h1.spaces-headline {
  max-width: none;
  font-size: 79.9px;
}

/* Renters steps: no corner arrows */
.renters-page .process-step::after {
  content: none;
}

/* Renters page, "Three Simple Steps.": heading on one line, steps pulled up closer to it */
.renters-page .process .section-heading h2 {
  max-width: none;
}

.renters-page .process .section-heading {
  margin-bottom: 30px;
}

.renters-page .process .section-heading-wide {
  max-width: none;
}

/* Spaces page: tenant reviews (sliding row) */
.home-page .testimonials.section-card {
  border-radius: 0;
  padding-top: 48px;
  padding-bottom: 44px;
}

.home-page .testimonials .section-heading {
  max-width: none;
  margin: 0 0 14px;
  text-align: left;
}

.home-page .testimonials .section-heading h2 {
  max-width: none;
  margin: 0;
  white-space: nowrap;
  font-size: 60.5px;
}

.home-page .testimonial-grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.home-page .testimonial-grid .testimonial-card {
  flex: 0 0 340px;
  min-height: 0;
  padding: 24px 24px 22px;
  scroll-snap-align: start;
  border-radius: 0;
}

.home-page .testimonial-card::after {
  content: none;
}

.testimonial-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: -6px 0 18px;
}

.testimonial-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(207, 123, 72, 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
  background: rgba(207, 123, 72, 0.16);
}

.home-page .testimonial-card .testimonial-stars {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.testimonial-quote {
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.7;
}

.testimonial-name {
  margin: 0;
  font-weight: 700;
}

.testimonial-name span {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.72;
}

/* Spaces page: bedroom and shared-space grids use the base three-per-row layout */

/* Owners hero: same headline size as the other pages; the headline column is widened
   on desktop so "Your Rent, On Time." stays on one row */
.home-page.owners-page .hero h1 {
  max-width: none;
}

@media (min-width: 1081px) {
  .home-page .owner-hero .hero-panel-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.68fr);
    gap: 40px;
  }
}

@media (max-width: 780px) {
  .home-page.owners-page .hero h1 {
    font-size: clamp(35.3px, 10.1vw, 43.9px);
  }
}

@media (max-width: 520px) {
  .home-page.owners-page .hero h1 {
    font-size: clamp(35.1px, 10vw, 43.7px);
  }
}

/* Owners page testimonials: heading sized and placed like the other section headings on the renters page */
.home-page #owner-testimonials.section-card {
  padding-top: 82px;
}

.home-page #owner-testimonials .section-heading h2 {
  font-size: 80.6px;
  line-height: 0.96;
}

.home-page #owner-testimonials .section-heading {
  margin-bottom: 26px;
}

@media (max-width: 520px) {
  .home-page #owner-testimonials .section-heading h2 {
    white-space: normal;
  }
}

/* Owners hero: "Our Services" label sits a little lower, closer to the line above the service cards */
.home-page .owner-hero .owner-services-label + .hero-summary {
  margin-top: 8px;
}

/* Owners page: "Why Lease To Us?" box slightly shorter; its top edge is unchanged */
@media (min-width: 781px) {
  .home-page #rent-to-rent.highlights {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .home-page #rent-to-rent .section-heading {
    margin-bottom: 28px;
  }

  .home-page #rent-to-rent .benefit-grid {
    row-gap: 6px;
  }

  .home-page #rent-to-rent .benefit-card {
    padding-top: 14px;
    padding-bottom: 10px;
  }
}

/* Room details popup: "Price includes" label and list */
.room-modal-note-label {
  margin: 0 0 8px;
  color: #f1a06a;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.room-modal-note-list {
  margin: 0;
  padding-left: 20px;
}

.room-modal-note-list li {
  margin: 4px 0;
}

.room-modal-note-list li::marker {
  color: #f1a06a;
}

/* Spaces hero: "Built For :" label above the three summary cards */
.hero-summary-label {
  position: relative;
  z-index: 1;
  width: min(100%, 1380px);
  margin: 80px auto 0;
  color: #f1a06a;
  font-family: "Manrope", sans-serif;
  font-size: 15.8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.home-page .hero-summary-label + .hero-summary {
  margin-top: 8px;
}

/* Spaces hero: slightly larger card labels (Working professionals / Students / Interns) */
.home-page .hero-summary-label + .hero-summary .summary-label {
  margin-bottom: 0;
  color: #fff8f1;
  font-size: 0.92rem;
  text-align: center;
}

.home-page .hero-summary-label + .hero-summary .summary-card {
  display: grid;
  place-items: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

/* First screen: keep the "Our Services" row (owners) and the "Built For:" row (spaces)
   visible without scrolling on laptop screens. Both rows anchor to the bottom of the hero. */
@media (min-width: 1081px) {
  .home-page .owner-hero {
    padding-top: 48px;
    padding-bottom: 28px;
  }

  .home-page .owner-hero .owner-services-label {
    padding-top: 28px;
  }

  .owner-hero .hero-intro-note {
    padding: 22px 26px;
  }

  .home-page .spaces-hero {
    display: flex;
    flex-direction: column;
    padding-top: 48px;
    padding-bottom: 28px;
  }

  .home-page .spaces-hero .hero-panel-grid {
    flex: 0 0 auto;
  }

  .home-page .spaces-hero .hero-visual-compact {
    min-height: 440px;
  }

  .home-page .spaces-hero .hero-summary-label {
    margin-top: auto;
    padding-top: 36px;
  }

  .home-page .spaces-hero .hero-summary-label + .hero-summary {
    padding-bottom: 0;
  }
}

/* Spaces hero: "see our rooms below" link inside the intro sentence */
.hero-copy .lead a.lead-link {
  color: #fff8f1;
  font-weight: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.hero-copy .lead a.lead-link:hover,
.hero-copy .lead a.lead-link:focus-visible {
  opacity: 0.85;
}

/* Room details popup: "Starting From" line under the "Monthly rent" label */
.room-modal-price-prefix {
  display: block;
  margin-top: 3px;
  color: rgba(255, 245, 235, 0.72);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Owners page: tighter spacing inside the "Why Choose Us to Manage Your Rental Property?" cards */
.home-page #management-service .benefit-card {
  min-height: 0;
  padding-top: 20px;
  padding-bottom: 16px;
  row-gap: 4px; /* the cards' inner rows otherwise inherit the 18px gap between cards */
}

.home-page #management-service .benefit-card .benefit-number {
  margin-bottom: 0;
}

.home-page #management-service .benefit-card .benefit-icon {
  margin: 0 0 8px;
}

.home-page #management-service .benefit-card h3 {
  margin: 0 0 6px;
}

.home-page #management-service .benefit-card p {
  line-height: 1.6;
}

/* Renters page: "Why People Love To Rent From Us?" box trimmed and evenly spaced so it fits on screen */
@media (min-width: 781px) {
  .home-page.renters-page .highlights {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .home-page.renters-page .highlights .section-heading {
    margin-bottom: 28px;
  }

  .home-page.renters-page .highlights .section-heading h2.heading-airy {
    max-width: none;
    font-size: 61.9px;
  }

  .home-page.renters-page .highlights .benefit-grid {
    row-gap: 10px;
  }

  .home-page.renters-page .highlights .benefit-card {
    min-height: 0;
    padding-top: 20px;
    padding-bottom: 16px;
  }
}

/* Renters page cards: number left and icon right on one row, then heading, then text */
.home-page .benefit-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.renters-page .highlights .benefit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 12px;
  row-gap: 4px;
}

.renters-page .highlights .benefit-card .benefit-number {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin-bottom: 0;
}

.renters-page .highlights .benefit-card .benefit-icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0 0 8px;
}

.renters-page .highlights .benefit-card h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 0 6px;
}

.renters-page .highlights .benefit-card p {
  grid-column: 1 / -1;
  grid-row: 3;
}

@supports (grid-template-rows: subgrid) {
  .renters-page .highlights .benefit-card {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* Renters page: "Why People Love To Rent From Us?" box sits closer under the hero */
.home-page.renters-page .hero {
  margin-bottom: 70px;
}

/* =====================================================================
   Phone layout polish (screens up to 520px wide). Desktop is untouched.
   ===================================================================== */
@media (max-width: 520px) {
  /* Header: compact logo block and a single scrolling row of nav pills */
  .home-page .site-header {
    padding: 12px 14px 14px;
  }

  .home-page .brand-logo-image img {
    height: 30px;
  }

  .home-page .site-header {
    min-width: 0;
    overflow: hidden;
  }

  .home-page .site-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .home-page .site-nav::-webkit-scrollbar {
    display: none;
  }

  .home-page .site-nav a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 15px;
    white-space: nowrap;
    font-size: 0.84rem;
    scroll-snap-align: start;
  }

  .home-page .header-button {
    min-height: 42px;
    margin-top: 6px;
    font-size: 0.9rem;
  }

  /* Hero: calmer headline sizes and shorter photos */
  .home-page .hero h1 {
    font-size: clamp(35.1px, 10vw, 43.7px);
    line-height: 1.02;
  }

  .home-page .hero h1.spaces-headline {
    font-size: clamp(29.5px, 8.4vw, 36.7px);
  }

  .home-page .hero .lead {
    font-size: 1rem;
    line-height: 1.62;
  }

  .home-page .hero-visual,
  .home-page .hero-visual-compact,
  .about-page .hero-visual {
    min-height: 0;
  }

  .home-page .hero-image-wrap,
  .about-page .hero-image-wrap,
  .hero-visual-compact .hero-image-wrap {
    max-width: 72%;
  }

  .owner-hero .hero-intro-note {
    padding: 20px 18px;
  }

  /* Section panels: softer corners, tighter padding, smaller titles */
  .home-page .highlights,
  .home-page .process,
  .home-page .spaces,
  .home-page .room-types,
  .home-page .testimonials.section-card {
    border-radius: 26px;
  }

  .home-page .highlights,
  .home-page .process {
    padding: 26px 18px 28px;
  }

  .home-page .section-heading {
    margin-bottom: 20px;
  }

  .home-page .section-heading h2 {
    max-width: none;
    font-size: clamp(28.8px, 8.2vw, 35.8px);
    line-height: 1.04;
  }

  .home-page .highlights .section-heading .eyebrow,
  .home-page .process .section-heading .eyebrow {
    font-size: 0.8rem;
  }

  /* Cards: less dead space */
  .home-page .benefit-grid,
  .home-page .process-grid {
    gap: 0;
  }

  .home-page .benefit-card,
  .home-page .process-step,
  .home-page .link-card {
    min-height: 0;
    padding: 18px 4px 20px;
  }

  .home-page .benefit-card h3,
  .home-page .process-step h3,
  .home-page .link-card h3 {
    margin: 6px 0 8px;
    font-size: 1.28rem;
  }

  .home-page .benefit-card p,
  .home-page .process-step p,
  .home-page .link-card p {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .home-page .benefit-icon {
    width: 38px;
    height: 38px;
    margin: 0;
  }

  .home-page .benefit-icon svg {
    width: 20px;
    height: 20px;
  }

  #rent-to-rent .benefit-card .benefit-icon,
  #management-service .benefit-card .benefit-icon,
  #sell-us-your-home .benefit-card .benefit-icon {
    margin: 0;
  }

  .home-page .choice-intro {
    font-size: 1.05rem;
  }

  /* Room types: shorter photos, tighter cards */
  .home-page .room-types {
    padding: 22px 16px 26px;
  }

  .room-types .section-heading h2 {
    font-size: clamp(27.7px, 7.9vw, 34.5px);
  }

  .room-types .section-heading .eyebrow {
    font-size: 1.1rem;
  }

  .room-type-grid {
    gap: 16px;
  }

  .room-type-card {
    padding: 16px;
    border-radius: 22px;
  }

  .room-type-card h3 {
    margin-bottom: 10px;
    font-size: 1.6rem;
  }

  .room-type-photo {
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
    border-radius: 16px;
  }

  /* Photo galleries: two across instead of one tall photo per row */
  .home-page .spaces {
    padding: 22px 14px 24px;
  }

  .space-grid-bedrooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .space-grid-bedrooms .space-card {
    border-radius: 16px;
  }

  /* Contact cards */
  .home-page .contact-item {
    min-height: 0;
    padding: 18px 18px 20px;
  }
}

/* Footer company line: a little larger on every page */
.home-page .site-footer {
  font-size: 0.9rem;
}

/* Footer: the registration number stays at its original smaller size */
.home-page .site-footer .footer-reg {
  font-size: 0.72rem;
}

/* Footer: "T&C apply" on its own line under the company name */
.home-page .site-footer .footer-terms {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

/* Owners page, sell section: intro on two lines and the cards pulled up closer */
#sell-us-your-home .section-heading-wide {
  max-width: 840px;
}

#sell-us-your-home .section-heading h2 {
  max-width: none;
}

#sell-us-your-home .section-heading {
  margin-bottom: 30px;
}

/* Owners page, sell section: compact enough to fit on one screen */
.home-page #sell-us-your-home {
  padding-top: 43.2px;
  padding-bottom: 43.2px;
}

#sell-us-your-home .section-heading {
  margin-bottom: 22px;
}

#sell-us-your-home .benefit-card {
  min-height: 0;
  padding: 20px 6px 18px;
}

#sell-us-your-home .benefit-card {
  row-gap: 4px; /* inner rows otherwise inherit the 18px gap between cards */
}

#sell-us-your-home .benefit-card .benefit-icon {
  margin: 0 0 24px; /* keeps the heading where it was after the row-gap change */
}

#sell-us-your-home .benefit-card h3 {
  margin-bottom: 8px;
}

#sell-us-your-home .service-section-actions {
  margin-top: 22px;
}

/* Testimonials: equal outlined cards, names on one baseline, large quote mark, no visible scrollbar */
.home-page .testimonial-grid {
  gap: 18px;
  padding: 6px 4px 10px;
  align-items: stretch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-page .testimonial-grid::-webkit-scrollbar {
  display: none;
}

.home-page .testimonial-grid .testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 36px) / 3);
  min-height: 0;
  padding: 58px 26px 24px;
  border: 1px solid rgba(207, 123, 72, 0.26);
  border-radius: 20px;
  background: rgba(255, 250, 244, 0.72);
  box-shadow: none;
}

.home-page .testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 20px;
  color: var(--accent);
  opacity: 0.6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.home-page .testimonial-card .testimonial-quote {
  margin: 0 0 30px;
}

.home-page .testimonial-card .testimonial-name {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(207, 123, 72, 0.18);
}

.home-page .testimonial-role {
  font-style: normal;
  font-weight: 500;
  opacity: 0.85;
}

@media (max-width: 1080px) {
  .home-page .testimonial-grid .testimonial-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (max-width: 520px) {
  .home-page .testimonial-grid {
    gap: 12px;
  }

  .home-page .testimonial-grid .testimonial-card {
    flex-basis: 100%;
    padding: 52px 20px 20px;
  }
}

/* Testimonial arrows: greyed out at the start and end of the row */
.testimonial-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}

/* Section labels: smaller and bold on every page (the three owner service labels included) */
.home-page .section-heading .eyebrow,
.home-page .hero .eyebrow {
  font-weight: 800;
}

#rent-to-rent .section-heading .eyebrow,
#management-service .section-heading .eyebrow,
#sell-us-your-home .section-heading .eyebrow {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* Room pop-up: rent and size as right-aligned stacks (label above, value below) */
.room-modal-facts {
  display: block;
}

.room-modal-facts div {
  display: block;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 245, 235, 0.14);
  text-align: right;
}

.room-modal-facts dt,
.room-modal-facts dd {
  display: block;
  padding: 0;
  border: 0;
  text-align: right;
}

.room-modal-facts dd {
  margin: 3px 0 0;
  font-size: 1.15rem;
}

.room-modal-facts dd .room-modal-price-prefix {
  margin-right: 6px;
  color: rgba(255, 245, 235, 0.75);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Spaces hero: "Explore Our Rooms" button under the intro */
.hero-copy .hero-explore {
  margin: 24px 0 0;
}

/* Spaces page: intro line under "Find Your Future Room" and "Shared Spaces For Everyday Living" */
.home-page .spaces .section-heading h2 {
  max-width: none;
}

.home-page .spaces .section-heading .section-intro {
  max-width: 640px;
  margin-top: 14px;
}

/* Renters page steps: headings sized so "View And Secure Your Room" stays on one row */
.renters-page .process-step h3 {
  font-size: 22.5px;
}

/* Room details popup: "Monthly rent" and "Room size" labels on the left, values on the right */
.room-modal-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 16px;
  align-items: center;
}

.room-modal-facts div {
  display: contents;
}

.room-modal-facts dt,
.room-modal-facts dd {
  padding: 10px 0;
  border: 0; /* no divider lines around the rent and size rows */
}

.room-modal-facts dt {
  text-align: left;
}

.room-modal-facts dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* "Starting From" sits as a small line directly above the amount */
.room-modal-facts dd .room-modal-price-prefix {
  display: block;
  margin: 0 0 1px;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* Contact page: item titles (Company, Address, ...) not bold */
.home-page.contact-page .contact-item h3 {
  font-weight: 400;
}

/* Room details popup: divider lines back on the rent and size rows.
   The rows use display: contents, so the line is drawn on both cells with no
   column gap between them, giving one continuous line across the full width. */
.room-modal-facts {
  column-gap: 0;
}

.room-modal-facts dt,
.room-modal-facts dd {
  border-top: 1px solid rgba(255, 245, 235, 0.16);
}

.room-modal-facts dd {
  padding-left: 16px;
}

.room-modal-facts div:last-child dt,
.room-modal-facts div:last-child dd {
  border-bottom: 1px solid rgba(255, 245, 235, 0.16);
}

/* Contact page: "Company Details" heading on one row */
.home-page.contact-page .contact-panel h2 {
  max-width: none;
  white-space: nowrap;
}

/* Both cells in a row share the row height, so the two halves of each line meet at the same level */
.room-modal-facts {
  align-items: stretch;
}

.room-modal-facts dt {
  display: flex;
  align-items: center;
}

.room-modal-facts dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

/* Contact page: company details start at the top of the panel instead of floating in the middle */
.contact-page .contact-inner {
  align-items: start;
}

.contact-page .contact-panel {
  justify-content: flex-start;
  align-self: start;
}

/* Hero photo frame (renters + spaces): explicit height with plain-pixel fallbacks so older browsers
   never show the photo at its natural size */
.hero-visual-compact .hero-image-wrap {
  height: 520px;
  height: 520px;
  max-width: 88%;
  max-width: min(88%, 560px);
  overflow: hidden;
}

.hero-visual-compact .hero-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
}

@media (min-width: 1081px) {
  .home-page .spaces-hero .hero-visual-compact .hero-image-wrap {
    height: 440px;
  }
}

@media (max-width: 520px) {
  .hero-visual-compact .hero-image-wrap {
    height: 400px;
  }
}

/* Contact page: "Company Details" label matches the "Message form" label colour */
.contact-panel .eyebrow {
  color: #efb790;
}

/* ==================================================================================
   Consistent sizing on every laptop, tablet and phone.
   Every size that used to scale with the window is pinned: desktop values are the
   sizes seen in a 1440px-wide window, tablet values a 900px window, phone values a
   390px phone. The desktop values were written in place above; the blocks below
   carry the tablet and phone values for the same declarations.
   ================================================================================== */

@media (min-width: 781px) and (max-width: 1080px) {
  .brand-mark {
    font-size: 23.2px;
  }

  .brand-logo-image img {
    height: 31px;
  }

  .logo-sized-heading {
    font-size: 30.6px;
  }

  .hero {
    padding: 36px;
  }

  .hero h1 {
    font-size: clamp(35.2px, 4.6vw, 47.6px);
  }

  .owner-note {
    padding: 28px 36px;
  }

  .owner-note h2 {
    font-size: clamp(26px, 3.4vw, 35.2px);
  }

  .section-copy h2, .section-heading h2, .proof-copy h2, .contact h2 {
    font-size: clamp(26px, 3.4vw, 35.2px);
  }

  .benefits {
    padding: 36px;
  }

  .highlights, .process, .audience-hub {
    padding: 36px;
  }

  .audience-panel-intro h3 {
    font-size: clamp(26px, 3.4vw, 35.2px);
  }

  .locations {
    padding: 36px;
  }

  .inquiry-card {
    padding: 27px;
  }

  .inquiry-card h2 {
    font-size: clamp(26px, 3.4vw, 35.2px);
  }

  .home-page .hero {
    margin-bottom: 72px;
  }

  .home-page .hero {
    padding: 63px 54px 0;
  }

  .home-page .hero::before {
    width: 522px;
  }

  .home-page .hero::before {
    height: 306px;
  }

  .home-page .hero::after {
    width: 324px;
  }

  .home-page .hero::after {
    height: 198px;
  }

  .home-page .hero-panel-grid {
    gap: 54px;
  }

  .home-page .hero h1 {
    font-size: clamp(48.2px, 6.3vw, 65.2px);
  }

  .home-page .hero-side-note {
    gap: 27px;
  }

  .home-page .hero-side-note {
    margin-top: 36px;
  }

  .home-page .hero-summary {
    margin: 63px auto 0;
  }

  .owner-services-label {
    margin: 18px auto 0;
  }

  .owner-services-label {
    transform: translateY(-54px);
  }

  .owner-services-label {
    font-size: clamp(11.7px, 1.5vw, 15.9px);
  }

  .owner-services-label + .hero-summary {
    transform: translateY(-45px);
  }

  .owner-hero .hero-visual {
    min-height: 414px;
  }

  .owner-services-label + .hero-summary .summary-label {
    font-size: clamp(11.1px, 1.5vw, 15.1px);
  }

  .owner-services-label + .hero-summary .summary-card h2 {
    font-size: clamp(14.2px, 1.9vw, 19.2px);
  }

  .service-section-actions {
    margin-top: 27px;
  }

  .room-types {
    padding: 36px;
  }

  .room-type-card h3 {
    font-size: clamp(19.7px, 2.6vw, 26.7px);
  }

  .home-page .co-living-features-title {
    margin: 45px auto 0;
  }

  .home-page .co-living-features-title {
    font-size: 18.1px;
  }

  .about-page .hero {
    padding-bottom: 54px;
  }

  .owner-bottom-actions, .tenant-bottom-actions {
    padding: 36px;
  }

  .owner-bottom-actions h2, .tenant-bottom-actions h2 {
    font-size: clamp(22.9px, 3vw, 31px);
  }

  .home-page .summary-card {
    padding: 30px 27px 20px;
  }

  .home-page main > section:not(.hero) {
    margin-bottom: 54px;
  }

  .home-page .highlights, .home-page .process, .home-page .benefits {
    padding: 54px;
  }

  .home-page .section-heading {
    margin-bottom: 45px;
  }

  .home-page .choice-intro {
    font-size: 16.7px;
  }

  .home-page .highlight-card h3, .home-page .process-step h3, .home-page .benefit-card h3, .home-page .link-card h3 {
    font-size: clamp(16.7px, 2.2vw, 22.5px);
  }

  .home-page .split-section {
    gap: 54px;
  }

  .home-page .split-section {
    padding: 54px;
  }

  .site-header {
    padding: 20px 36px;
  }

  .brand-mark {
    font-size: 21.6px;
  }

  .site-nav {
    gap: 21.6px;
  }

  .section-card, .split-section, .proof-card, .contact, .spaces {
    margin: 0 auto 27px;
  }

  .hero {
    padding: 45px 45px;
  }

  .hero-panel-grid {
    gap: 45px;
  }

  .hero h1 {
    font-size: clamp(44.4px, 5.8vw, 60px);
  }

  .lead, .hero .lead, .section-copy p, .proof-copy p, .contact-intro, .owner-note p {
    font-size: clamp(12.3px, 1.6vw, 16.7px);
  }

  .hero-float {
    right: 18px;
  }

  .hero-float {
    bottom: 18px;
  }

  .hero-summary {
    margin-top: 54px;
  }

  .summary-card h2 {
    font-size: clamp(12.9px, 1.7vw, 17.5px);
  }

  .section-heading h2, .section-copy h2, .proof-copy h2, .contact h2 {
    font-size: clamp(42.8px, 5.6vw, 58px);
  }

  .highlight-card h3, .process-step h3, .link-card h3, .benefit-card h3 {
    font-size: clamp(19.7px, 2.6vw, 26.7px);
  }

  .split-section {
    padding: 45px;
  }

  .spaces {
    padding: 45px;
  }

  .contact-panel {
    padding: 18px;
  }

  .contact-page .contact {
    padding: 45px 54px;
  }

  .contact-page .contact-inner {
    gap: 36px;
  }

  .contact-page .contact h2 {
    font-size: clamp(30.6px, 4vw, 41.4px);
  }

  .contact-page .contact-intro {
    font-size: 14.5px;
  }

  .contact-page .contact-list {
    gap: 18px;
  }

  .contact-page .contact-item {
    padding: 18px;
  }

  .contact-page .inquiry-card {
    padding: 27px;
  }

  .owner-hero .hero-intro-note {
    padding: 27px;
  }

  .home-page .owner-hero {
    padding-bottom: 36px;
  }

  .home-page .owner-hero .owner-services-label {
    padding-top: 45px;
  }

  .brand-tagline {
    transform: translateX(-2.6px);
  }

  .about-page .hero-visual {
    margin-top: -27px;
  }

  .room-types {
    padding: 40.5px;
  }

  .room-type-card h3 {
    font-size: clamp(22.2px, 2.9vw, 30px);
  }

  .room-types {
    margin-top: -18px;
  }

  .room-types {
    padding-top: 22px;
  }

  .room-types .section-heading h2 {
    font-size: clamp(26px, 3.4vw, 35.2px);
  }

  #rent-to-rent .section-heading h2, #management-service .section-heading h2, #sell-us-your-home .section-heading h2 {
    font-size: clamp(26px, 3.4vw, 35.2px);
  }

  .home-page .hero-tagline {
    font-size: clamp(12.1px, 1.6vw, 16.3px);
  }

  .scroll-cue {
    right: 28.8px;
  }

  #rent-to-rent .section-heading .eyebrow, #management-service .section-heading .eyebrow, #sell-us-your-home .section-heading .eyebrow {
    font-size: clamp(13.6px, 1.8vw, 18.4px);
  }

  .room-modal {
    width: min(92vw, 460px);
  }

  .room-modal-card {
    padding: 36px;
  }

  .room-modal h3 {
    font-size: clamp(22.9px, 3vw, 31px);
  }

  .home-page .hero h1.spaces-headline {
    font-size: clamp(42.4px, 5.5vw, 57.4px);
  }

  .renters-page .process .section-heading {
    margin-bottom: 21.6px;
  }

  .home-page .testimonials.section-card {
    padding-top: 36px;
  }

  .home-page .testimonials.section-card {
    padding-bottom: 31.5px;
  }

  .home-page .testimonials .section-heading h2 {
    font-size: clamp(32.1px, 4.2vw, 43.5px);
  }

  .home-page .testimonial-grid .testimonial-card {
    flex: 0 0 340px;
  }

  .home-page #owner-testimonials.section-card {
    padding-top: 51.3px;
  }

  .home-page #owner-testimonials .section-heading h2 {
    font-size: clamp(42.8px, 5.6vw, 58px);
  }

  .home-page #owner-testimonials .section-heading {
    margin-bottom: 18px;
  }

  .home-page #rent-to-rent.highlights {
    padding-top: 34px;
  }

  .home-page #rent-to-rent.highlights {
    padding-bottom: 34px;
  }

  .home-page #rent-to-rent .section-heading {
    margin-bottom: 20px;
  }

  .hero-summary-label {
    margin: 54px auto 0;
  }

  .hero-summary-label {
    font-size: clamp(11.7px, 1.5vw, 15.9px);
  }

  .home-page.renters-page .highlights {
    padding-top: 34px;
  }

  .home-page.renters-page .highlights {
    padding-bottom: 34px;
  }

  .home-page.renters-page .highlights .section-heading {
    margin-bottom: 20px;
  }

  .home-page.renters-page .highlights .section-heading h2.heading-airy {
    font-size: clamp(32.9px, 4.3vw, 44.5px);
  }

  .home-page.renters-page .hero {
    margin-bottom: 45px;
  }

  #sell-us-your-home .section-heading {
    margin-bottom: 21.6px;
  }

  .home-page #sell-us-your-home {
    padding-top: 28px;
  }

  .home-page #sell-us-your-home {
    padding-bottom: 28px;
  }

  #sell-us-your-home .section-heading {
    margin-bottom: 16.2px;
  }

  .renters-page .process-step h3 {
    font-size: clamp(14.8px, 1.9vw, 20px);
  }

  .hero-visual-compact .hero-image-wrap {
    height: 414px;
  }
}

@media (max-width: 780px) {
  .brand-mark {
    font-size: 22.4px;
  }

  .brand-logo-image img {
    height: 31px;
  }

  .logo-sized-heading {
    font-size: 26.6px;
  }

  .hero {
    padding: 28px;
  }

  .owner-note {
    padding: 28px 24px;
  }

  .owner-note h2 {
    font-size: clamp(23.3px, 6.6vw, 29px);
  }

  .benefits {
    padding: 28px;
  }

  .highlights, .process, .audience-hub {
    padding: 28px;
  }

  .audience-panel-intro h3 {
    font-size: clamp(23.3px, 6.6vw, 29px);
  }

  .locations {
    padding: 28px;
  }

  .inquiry-card {
    padding: 22px;
  }

  .home-page .hero {
    margin-bottom: 52px;
  }

  .home-page .hero {
    padding: 54px 24px 0;
  }

  .home-page .hero::before {
    width: 226.2px;
  }

  .home-page .hero::before {
    height: 132.6px;
  }

  .home-page .hero::after {
    width: 140.4px;
  }

  .home-page .hero::after {
    height: 85.8px;
  }

  .home-page .hero-panel-grid {
    gap: 44px;
  }

  .home-page .hero-side-note {
    gap: 20px;
  }

  .home-page .hero-side-note {
    margin-top: 30px;
  }

  .home-page .hero-summary {
    margin: 56px auto 0;
  }

  .owner-services-label {
    margin: 10px auto 0;
  }

  .owner-services-label {
    transform: translateY(-42px);
  }

  .owner-services-label {
    font-size: clamp(12px, 3.4vw, 14.9px);
  }

  .owner-services-label + .hero-summary {
    transform: translateY(-32px);
  }

  .owner-hero .hero-visual {
    min-height: 400px;
  }

  .owner-services-label + .hero-summary .summary-label {
    font-size: clamp(11.3px, 3.2vw, 14.1px);
  }

  .owner-services-label + .hero-summary .summary-card h2 {
    font-size: clamp(14.5px, 4.1vw, 18px);
  }

  .service-section-actions {
    margin-top: 24px;
  }

  .room-types {
    padding: 28px;
  }

  .room-type-card h3 {
    font-size: clamp(20.2px, 5.7vw, 25.1px);
  }

  .home-page .co-living-features-title {
    margin: 30px auto 0;
  }

  .home-page .co-living-features-title {
    font-size: 17.5px;
  }

  .about-page .hero {
    padding-bottom: 42px;
  }

  .owner-bottom-actions, .tenant-bottom-actions {
    padding: 28px;
  }

  .owner-bottom-actions h2, .tenant-bottom-actions h2 {
    font-size: clamp(20.2px, 5.7vw, 25.1px);
  }

  .home-page .summary-card {
    padding: 30px 20px 20px;
  }

  .home-page main > section:not(.hero) {
    margin-bottom: 34px;
  }

  .home-page .highlights, .home-page .process, .home-page .benefits {
    padding: 42px;
  }

  .home-page .section-heading {
    margin-bottom: 34px;
  }

  .home-page .choice-intro {
    font-size: 16.1px;
  }

  .home-page .highlight-card h3, .home-page .process-step h3, .home-page .benefit-card h3, .home-page .link-card h3 {
    font-size: clamp(17px, 4.8vw, 21.2px);
  }

  .home-page .split-section {
    gap: 34px;
  }

  .home-page .split-section {
    padding: 40px;
  }

  .site-header {
    padding: 20px 20px;
  }

  .brand-mark {
    font-size: 20.3px;
  }

  .site-nav {
    gap: 16px;
  }

  .section-card, .split-section, .proof-card, .contact, .spaces {
    margin: 0 auto 22px;
  }

  .hero {
    padding: 34px 24px;
  }

  .hero-panel-grid {
    gap: 26px;
  }

  .lead, .hero .lead, .section-copy p, .proof-copy p, .contact-intro, .owner-note p {
    font-size: clamp(12.6px, 3.6vw, 15.7px);
  }

  .hero-float {
    right: 12px;
  }

  .hero-float {
    bottom: 14px;
  }

  .hero-summary {
    margin-top: 34px;
  }

  .summary-card h2 {
    font-size: clamp(13.2px, 3.8vw, 16.5px);
  }

  .highlight-card h3, .process-step h3, .link-card h3, .benefit-card h3 {
    font-size: clamp(20.2px, 5.7vw, 25.1px);
  }

  .split-section {
    padding: 30px;
  }

  .spaces {
    padding: 30px;
  }

  .contact-panel {
    padding: 8px;
  }

  .contact-page .contact {
    padding: 34px 24px;
  }

  .contact-page .contact-inner {
    gap: 28px;
  }

  .contact-page .contact h2 {
    font-size: clamp(28.4px, 8.1vw, 35.3px);
  }

  .contact-page .contact-intro {
    font-size: 14px;
  }

  .contact-page .contact-list {
    gap: 16px;
  }

  .contact-page .contact-item {
    padding: 18px;
  }

  .contact-page .inquiry-card {
    padding: 24px;
  }

  .owner-hero .hero-intro-note {
    padding: 22px;
  }

  .home-page .owner-hero {
    padding-bottom: 28px;
  }

  .home-page .owner-hero .owner-services-label {
    padding-top: 32px;
  }

  .brand-tagline {
    transform: translateX(-2.6px);
  }

  .about-page .hero-visual {
    margin-top: -20px;
  }

  .room-types {
    padding: 32px;
  }

  .room-type-card h3 {
    font-size: clamp(22.7px, 6.5vw, 28.2px);
  }

  .room-types {
    margin-top: -12px;
  }

  .room-types {
    padding-top: 22px;
  }

  #rent-to-rent .section-heading h2, #management-service .section-heading h2, #sell-us-your-home .section-heading h2 {
    font-size: clamp(22.7px, 6.5vw, 28.2px);
  }

  .home-page .hero-tagline {
    font-size: clamp(12.3px, 3.5vw, 15.3px);
  }

  .scroll-cue {
    right: 22px;
  }

  #rent-to-rent .section-heading .eyebrow, #management-service .section-heading .eyebrow, #sell-us-your-home .section-heading .eyebrow {
    font-size: clamp(13.9px, 3.9vw, 17.2px);
  }

  .room-modal {
    width: min(92vw, 460px);
  }

  .room-modal-card {
    padding: 26px;
  }

  .room-modal h3 {
    font-size: clamp(21.4px, 6.1vw, 26.7px);
  }

  .renters-page .process .section-heading {
    margin-bottom: 18px;
  }

  .home-page .testimonials.section-card {
    padding-top: 32px;
  }

  .home-page .testimonials.section-card {
    padding-bottom: 28px;
  }

  .home-page .testimonials .section-heading h2 {
    font-size: clamp(23.9px, 6.8vw, 29.8px);
  }

  .home-page .testimonial-grid .testimonial-card {
    flex: 0 0 304.2px;
  }

  .home-page #owner-testimonials.section-card {
    padding-top: 40px;
  }

  .home-page #owner-testimonials .section-heading h2 {
    font-size: clamp(34px, 9.7vw, 42.3px);
  }

  .home-page #owner-testimonials .section-heading {
    margin-bottom: 16px;
  }

  .hero-summary-label {
    margin: 48px auto 0;
  }

  .hero-summary-label {
    font-size: clamp(12px, 3.4vw, 14.9px);
  }

  .home-page.renters-page .hero {
    margin-bottom: 28px;
  }

  #sell-us-your-home .section-heading {
    margin-bottom: 18px;
  }

  .home-page #sell-us-your-home {
    padding-top: 28px;
  }

  .home-page #sell-us-your-home {
    padding-bottom: 28px;
  }

  #sell-us-your-home .section-heading {
    margin-bottom: 14px;
  }

  .renters-page .process-step h3 {
    font-size: clamp(15.1px, 4.3vw, 18.8px);
  }

  .hero-visual-compact .hero-image-wrap {
    height: 400px;
  }
}

/* ==================================================================================
   Fit-to-canvas (laptops): the page is designed on a 1440x820 window and scaled as a
   whole to fit the window (see the small script in each page head). The hero uses the
   zoom-corrected window height, and the header, hero and contact section keep their
   content centred in a 1440px band when the window is wider than the design after scaling.
   ================================================================================== */
@media (min-width: 1081px) {
  .home-page .hero {
    min-height: calc(var(--layout-vh, 100vh) - 118px);
    padding-inline: calc(86.4px + max(0px, (100% - 1440px) / 2));
  }

  .site-header {
    padding-inline: calc(42px + max(0px, (100% - 1440px) / 2));
  }

  .contact-page .contact {
    padding-inline: calc(86.4px + max(0px, (100% - 1440px) / 2));
  }
}

/* Contact cards: company name, address, phone and email in bold */
.contact-item p,
.contact-item p a {
  font-weight: 700;
}

.contact-item .company-registration {
  font-weight: 500;
}

/* Contact cards: smaller boxes */
.contact-list {
  gap: 14px;
}

.contact-item {
  min-height: 0;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
}

.contact-item .contact-badge {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.contact-item h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.contact-page .contact-list {
  gap: 14px;
}

.contact-page .contact-item {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 0;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
}

/* Contact page: whole section sized to fit one screen, cards column balanced against the form */
.contact-page .contact {
  min-height: 0;
  padding: 30px 26px 32px;
}

.contact-page .contact-inner {
  align-items: stretch;
  gap: 40px;
}

.contact-page .contact-panel {
  display: flex;
}

.contact-page .contact-list {
  height: 100%;
  align-content: space-between;
  gap: 14px;
}

.contact-page .inquiry-card {
  padding: 26px 28px 24px;
}

.contact-page .inquiry-card h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.05;
}

.contact-page .inquiry-intro {
  margin: 10px 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-page .inquiry-form {
  gap: 10px;
}

.contact-page .inquiry-form label {
  gap: 5px;
  font-size: 0.86rem;
}

.contact-page .inquiry-type-option > span {
  padding: 10px 14px;
}

.contact-page .inquiry-type-option strong {
  font-size: 0.95rem;
}

.contact-page .inquiry-type-option small {
  font-size: 0.78rem;
}

.contact-page .inquiry-form input:not([type="radio"]):not([type="hidden"]),
.contact-page .inquiry-form select {
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.contact-page .inquiry-form textarea {
  min-height: 84px;
}

.contact-page .inquiry-form .button {
  min-height: 44px;
}

.contact-page .form-status:empty {
  display: none;
}

.contact-page .form-note {
  margin-top: 2px;
  font-size: 0.8rem;
}

/* Contact page: final fit and balance */
.contact-page .contact {
  padding: 22px 26px 24px;
}

.contact-page .contact-panel {
  flex-direction: column;
}

.contact-page .contact-list {
  flex: 1 1 auto;
  height: auto;
  align-content: space-between;
}

.contact-page .inquiry-card h2 {
  max-width: none;
  white-space: nowrap;
}

.contact-page .inquiry-intro {
  margin: 8px 0 12px;
}

.contact-page .inquiry-form {
  gap: 8px;
}

.contact-page .inquiry-form textarea {
  min-height: 72px;
}

.contact-page .contact-panel {
  align-self: stretch;
}

/* Contact cards: a touch more presence so the column feels balanced beside the form */
@media (min-width: 1081px) {
  .contact-page .contact-item {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 20px 22px;
  }

  .contact-page .contact-item .contact-badge {
    width: 48px;
    height: 48px;
  }

  .contact-page .contact-item h3 {
    font-size: 1.15rem;
  }
}

/* Contact cards: keep the five cards together at the top of the column */
.contact-page .contact-list {
  align-content: start;
  gap: 14px;
}

/* Contact cards: five equal panels that fill the full height of the column beside the form */
@media (min-width: 1081px) {
  .contact-page .contact-list {
    grid-auto-rows: 1fr;
    align-content: stretch;
    gap: 14px;
  }

  .contact-page .contact-item {
    align-items: center;
    align-content: center;
  }
}

/* Contact cards: smaller headings (Company, Address, Phone, WhatsApp, Email) */
.contact-page .contact-item h3 {
  margin-bottom: 3px;
  font-size: 0.95rem;
}

@media (min-width: 1081px) {
  .contact-page .contact-item h3 {
    font-size: 0.98rem;
  }
}

/* Contact cards: headings as small spaced capitals */
.contact-page .contact-item h3 {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 1081px) {
  .contact-page .contact-item h3 {
    font-size: 0.76rem;
  }
}

/* Contact form: field labels in the same small capitals as the contact card headings */
.contact-page .inquiry-form label,
.contact-page .inquiry-fieldset legend {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-page .inquiry-type-option strong,
.contact-page .inquiry-type-option small {
  text-transform: none;
  letter-spacing: 0;
}

.contact-page .inquiry-type-option strong {
  font-size: 0.95rem;
}

.contact-page .inquiry-type-option small {
  font-size: 0.78rem;
  font-weight: 500;
}

/* Contact form: the two "what do you need" options centred */
.contact-page .inquiry-type-option span {
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 2px;
  min-height: 0;
  padding: 11px 16px;
  text-align: center;
}

/* Header: WhatsApp logo button */
.header-whatsapp {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
}

.header-whatsapp .whatsapp-icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

@media (max-width: 520px) {
  .home-page .header-button.header-whatsapp {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    margin: 6px auto 0;
  }
}

/* Contact form options: keep the title and its line of text close together (rows packed at the centre) */
.contact-page .inquiry-type-option span {
  align-content: center;
  gap: 2px;
}

/* Header WhatsApp: pill button with the logo on the left and the word next to it */
.home-page .header-button.header-whatsapp,
.header-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
}

.header-whatsapp .whatsapp-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.header-whatsapp-label {
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Contact form heading "Send Us A Message.": normal spacing between the words */
.contact-page .inquiry-card h2,
.home-page.contact-page .contact .inquiry-card h2 {
  word-spacing: normal;
}

/* Contact form heading: tighter word spacing */
.contact-page .inquiry-card h2 {
  word-spacing: 0.1cm;
}

/* Contact page: one continuous dark background from header to footer */
.home-page.contact-page {
  background: linear-gradient(125deg, rgba(33, 22, 16, 0.98), rgba(54, 34, 24, 0.96) 55%, rgba(168, 89, 45, 0.94)) #2b1a12;
}

.contact-page .contact {
  background: transparent;
  box-shadow: none;
}

.contact-page main > section:not(.hero) {
  margin-bottom: 0;
}

.contact-page .site-footer {
  padding-block: 28px 32px;
}

/* Contact form heading: a little more space between the words */
.contact-page .inquiry-card h2 {
  word-spacing: 0.2em;
}

.home-page.contact-page .inquiry-card h2,
.contact-page .inquiry-card h2#inquiry-title {
  word-spacing: 0.2em;
}

/* Renters page: room card titles in the site font, all caps */
.home-page .room-types .room-type-card h3 {
  font-family: "Manrope", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px; /* a little air between the title and the photo */
}

/* Owners hero: smaller headline on two rows ("Your Property, Well Cared For." stays together on desktop) */
@media (min-width: 1081px) {
  .home-page.owners-page .hero h1 {
    font-size: 74px;
  }

  .no-break-desktop {
    white-space: nowrap;
  }
}

/* Owners hero: orange accent words in the headline, in the logo-style rounded font */
.home-page .hero h1 .headline-accent {
  color: #f1a06a;
  font-family: "Quicksand", "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  word-spacing: 1px; /* Quicksand's space is wider; this matches the 21px gap of "Your Rent," */
}

/* Spaces page: "Find Your Future Room" on one row */
@media (min-width: 1081px) {
  .home-page #our-rooms .section-heading {
    max-width: none;
    margin-bottom: 28px; /* photos sit closer under the heading */
  }

  .home-page #our-rooms .section-heading .section-intro {
    margin-top: 6px; /* intro line sits closer under the heading */
  }

  .home-page #our-rooms .section-heading h2 {
    white-space: nowrap;
  }
}

/* Spaces page: "Shared Spaces For Everyday Living" on one row (smaller, it is a long heading) */
@media (min-width: 1081px) {
  .home-page .shared-spaces .section-heading {
    max-width: none;
    margin-bottom: 28px;
  }

  .home-page .shared-spaces .section-heading h2 {
    font-size: 50px;
    white-space: nowrap;
  }

  .home-page .shared-spaces .section-heading .section-intro {
    margin-top: 6px;
  }
}

/* Service and benefit cards: no numbers; the icon sits where the number was (left) */
#rent-to-rent .benefit-card .benefit-number,
#management-service .benefit-card .benefit-number,
#sell-us-your-home .benefit-card .benefit-number,
.renters-page .highlights .benefit-card .benefit-number {
  display: none;
}

#rent-to-rent .benefit-card .benefit-icon,
#management-service .benefit-card .benefit-icon,
#sell-us-your-home .benefit-card .benefit-icon,
.renters-page .highlights .benefit-card .benefit-icon {
  grid-column: 1;
  justify-self: start;
}

/* Co-living page: "Shared Spaces For Everyday Living" matches "Find Your Future Room" */
.home-page .shared-spaces .section-heading h2,
.home-page .spaces.shared-spaces .section-heading h2 {
  font-size: clamp(2.7rem, 5.6vw, 5.8rem);
  line-height: 0.96;
  max-width: none;
}

@media (max-width: 520px) {
  .home-page .shared-spaces .section-heading h2,
  .home-page .spaces.shared-spaces .section-heading h2 {
    font-size: clamp(1.85rem, 8.2vw, 2.3rem);
    line-height: 1.04;
  }
}

/* Service and benefit cards (owners page sections and renters "Why People Love Renting With Us"):
   vertical lines between the cards in each row instead of a line above each card */
@media (min-width: 781px) {
  .home-page #rent-to-rent .benefit-card,
  .home-page #management-service .benefit-card,
  .home-page #sell-us-your-home .benefit-card,
  .home-page.renters-page .highlights .benefit-card {
    position: relative;
    border-top: 0;
    padding-right: 18px;
  }

  .home-page #rent-to-rent .benefit-card:not(:nth-child(3n + 1)),
  .home-page #management-service .benefit-card:not(:nth-child(3n + 1)),
  .home-page #sell-us-your-home .benefit-card:not(:nth-child(3n + 1)),
  .home-page.renters-page .highlights .benefit-card:not(:nth-child(3n + 1)) {
    padding-left: 18px;
    border-left: 0;
  }

  /* the divider is drawn shorter than the card, with space left underneath */
  .home-page #rent-to-rent .benefit-card:not(:nth-child(3n + 1))::before,
  .home-page #management-service .benefit-card:not(:nth-child(3n + 1))::before,
  .home-page #sell-us-your-home .benefit-card:not(:nth-child(3n + 1))::before,
  .home-page.renters-page .highlights .benefit-card:not(:nth-child(3n + 1))::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 18px;
    width: 1px;
    background: rgba(207, 123, 72, 0.32);
  }
}

/* Owners page: Management service cards use the same icon / heading / text spacing as Rent To Rent */
#management-service .benefit-card {
  row-gap: normal;
}

#management-service .benefit-card .benefit-icon {
  margin: 0 0 18px;
}

#management-service .benefit-card h3 {
  margin-bottom: 12px;
}

.home-page #management-service .benefit-card {
  row-gap: normal;
}

.home-page #management-service .benefit-card .benefit-icon {
  margin: 0 0 18px;
}

.home-page #management-service .benefit-card h3 {
  margin: 0 0 12px;
}

.home-page #management-service .benefit-card p {
  margin: 0;
}

.home-page #management-service .benefit-card {
  row-gap: 0;
}

/* Reviews: occupation after the name in smaller text */
.home-page .testimonial-role {
  font-size: 0.8em;
}

.home-page #management-service .benefit-card .benefit-icon {
  margin: 0 0 24px;
}

.home-page #management-service .benefit-card h3 {
  margin: 0 0 18px;
}

/* Co-living page: "Find Your Future Room" and "Shared Spaces For Everyday Living" a step smaller */
@media (min-width: 1081px) {
  .home-page .spaces .section-heading h2,
  .home-page .spaces.shared-spaces .section-heading h2 {
    font-size: 68px;
  }
}

/* Renters page: "I Need a Room Fast!" button in the site orange, opens WhatsApp */
.home-page .room-types .room-types-cta-button {
  border-color: transparent;
  background: var(--accent);
  color: #fff8f1;
  box-shadow: 0 14px 30px rgba(207, 123, 72, 0.32);
}

.home-page .room-types .room-types-cta-button:hover,
.home-page .room-types .room-types-cta-button:focus-visible {
  background: var(--accent-deep);
  color: #fff8f1;
}

/* ==================================================================================
   Responsive audit (2026-09-13)
   Laptops without CSS zoom support (or with scripts off) do not get the fit-to-canvas
   scaling; for them the heading sizes fall back to clamp() so they shrink with the
   window (reaching the full design size at about 1550px). Body text keeps its size.
   ================================================================================== */
@media (min-width: 1081px) {
  html:not(.fit-active) .hero h1  {
    font-size: clamp(35.9px, 3.84vw, 65.2px);
  }

  html:not(.fit-active) .owner-note h2 {
    font-size: clamp(25.9px, 3vw, 47.1px);
  }

  html:not(.fit-active) .section-copy h2, html:not(.fit-active) .section-heading h2, html:not(.fit-active) .proof-copy h2, html:not(.fit-active) .contact h2 {
    font-size: clamp(26.7px, 3.1vw, 48.6px);
  }

  html:not(.fit-active) .audience-panel-intro h3 {
    font-size: clamp(24.8px, 2.9vw, 45px);
  }

  html:not(.fit-active) .inquiry-card h2 {
    font-size: clamp(25.1px, 2.9vw, 45.7px);
  }

  html:not(.fit-active) .home-page .hero h1  {
    font-size: clamp(49.9px, 5.34vw, 90.7px);
  }

  html:not(.fit-active) .owner-services-label + .hero-summary .summary-card h2 {
    font-size: clamp(11.8px, 1.4vw, 21.5px);
  }

  html:not(.fit-active) .room-type-card h3 {
    font-size: clamp(17.9px, 2.1vw, 32.6px);
  }

  html:not(.fit-active) .owner-bottom-actions h2, html:not(.fit-active) .tenant-bottom-actions h2 {
    font-size: clamp(20.7px, 2.4vw, 37.7px);
  }

  html:not(.fit-active) .home-page .highlight-card h3, html:not(.fit-active) .home-page .process-step h3, html:not(.fit-active) .home-page .benefit-card h3, html:not(.fit-active) .home-page .link-card h3 {
    font-size: clamp(14.7px, 1.7vw, 26.8px);
  }

  html:not(.fit-active) .hero h1  {
    font-size: clamp(39.9px, 4.26vw, 72.5px);
  }

  html:not(.fit-active) .summary-card h2 {
    font-size: clamp(10.2px, 1.2vw, 18.6px);
  }

  html:not(.fit-active) .section-heading h2, html:not(.fit-active) .section-copy h2, html:not(.fit-active) .proof-copy h2, html:not(.fit-active) .contact h2 {
    font-size: clamp(44.3px, 5.2vw, 80.6px);
  }

  html:not(.fit-active) .highlight-card h3, html:not(.fit-active) .process-step h3, html:not(.fit-active) .link-card h3, html:not(.fit-active) .benefit-card h3 {
    font-size: clamp(17.9px, 2.1vw, 32.6px);
  }

  html:not(.fit-active) .contact-page .contact h2 {
    font-size: clamp(31.7px, 3.7vw, 57.6px);
  }

  html:not(.fit-active) .room-type-card h3 {
    font-size: clamp(20.4px, 2.4vw, 37px);
  }

  html:not(.fit-active) .room-types .section-heading h2 {
    font-size: clamp(23.9px, 2.8vw, 43.5px);
  }

  html:not(.fit-active) #rent-to-rent .section-heading h2, html:not(.fit-active) #management-service .section-heading h2, html:not(.fit-active) #sell-us-your-home .section-heading h2 {
    font-size: clamp(24.8px, 2.9vw, 45px);
  }

  html:not(.fit-active) #rent-to-rent .section-heading .eyebrow, html:not(.fit-active) #management-service .section-heading .eyebrow, html:not(.fit-active) #sell-us-your-home .section-heading .eyebrow {
    font-size: clamp(11.2px, 1.3vw, 20.3px);
  }

  html:not(.fit-active) .room-modal h3 {
    font-size: clamp(17.5px, 2.1vw, 31.9px);
  }

  html:not(.fit-active) .home-page .hero h1.spaces-headline  {
    font-size: clamp(43.9px, 4.7vw, 79.9px);
  }

  html:not(.fit-active) .home-page .testimonials .section-heading h2 {
    font-size: clamp(33.3px, 3.9vw, 60.5px);
  }

  html:not(.fit-active) .home-page #owner-testimonials .section-heading h2 {
    font-size: clamp(44.3px, 5.2vw, 80.6px);
  }

  html:not(.fit-active) .home-page.renters-page .highlights .section-heading h2.heading-airy {
    font-size: clamp(34px, 4vw, 61.9px);
  }

  html:not(.fit-active) .renters-page .process-step h3 {
    font-size: clamp(12.4px, 1.5vw, 22.5px);
  }

  html:not(.fit-active) .home-page.owners-page .hero h1  {
    font-size: clamp(40.7px, 4.35vw, 74px);
  }

  html:not(.fit-active) .home-page .shared-spaces .section-heading h2 {
    font-size: clamp(27.5px, 3.2vw, 50px);
  }

  html:not(.fit-active) .home-page .spaces .section-heading h2, html:not(.fit-active) .home-page .spaces.shared-spaces .section-heading h2 {
    font-size: clamp(37.4px, 4.4vw, 68px);
  }
}

/* Responsive audit: headings that only had a phone (<=520px) size get their window-scaled size
   back for large phones and small tablets (521-780px) */
@media (min-width: 521px) and (max-width: 780px) {
  .room-types .section-heading h2 {
    font-size: clamp(19.6px, 3.02vw, 26.1px);
  }

  .home-page .hero h1.spaces-headline {
    font-size: clamp(36.0px, 5.55vw, 47.9px);
  }
}

/* Responsive audit: About headline (with the inline logo) needs a steeper fallback */
@media (min-width: 1081px) {
  html:not(.fit-active) .home-page.about-page .hero h1 {
    font-size: clamp(46px, 4.6vw, 90.7px);
  }
}

/* Owner service tabs: orange plus sign, visually the same size as the tab text */
.home-page .owner-hero .hero-summary a.summary-card::after {
  content: "+";
  color: var(--accent);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

/* Phone fix: "How Can We Help You?" card arrow was overlapping a two-line heading
   ("Looking For Hassle Free Tenant Experience?"), and the text arrow character can be
   substituted with a coloured emoji-style glyph on some phones instead of plain text.
   Replaced with a real SVG icon, which cannot be substituted by any font/emoji on any
   device, and reserved room so the heading never runs under it. */
@media (max-width: 780px) {
  .home-page .about-link-grid .link-card::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' stroke='%23cf7b48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }

  .home-page .about-link-grid .link-card h3 {
    padding-right: 30px;
  }
}

/* Line breaks that only apply on phones */
br.phone-break {
  display: none;
}

/* A hyphenated word that must never split at its hyphen ("Co-Living") */
.keep-hyphen {
  white-space: nowrap;
}

/* PHONE-FIX-2026-09-13: headlines and room photo on phones */
/* On larger iPhones (430px+) the headlines grew with the screen width and, with the fixed
   side padding, words were pushed onto their own lines ("We", "Space.", "Find A") and
   "Why People Love Renting" ran off the card. On phones the headlines now stay at one
   size that fits every phone, with word gaps in proportion to the text (the same
   proportion as on the laptop), and the room photo is a size that fits the screen.
   Laptop and tablet layouts are not affected. */
@media (max-width: 520px) {
  .home-page .hero h1,
  .home-page.owners-page .hero h1 {
    max-width: none;
    font-size: 38px;
    word-spacing: 0.12em;
    text-wrap: wrap; /* Safari's balanced wrapping split short lines ("Your / Property,") */
  }

  .home-page .hero h1.spaces-headline {
    font-size: 34px;
  }

  .home-page .section-heading h2,
  .home-page .spaces .section-heading h2,
  .home-page .shared-spaces .section-heading h2,
  .home-page .spaces.shared-spaces .section-heading h2,
  .home-page.renters-page .highlights .section-heading h2.heading-airy {
    font-size: 30px;
    word-spacing: 0.12em;
  }

  /* "Why People Love Renting With Us": wraps naturally on narrow phones instead of running off the card */
  .home-page.renters-page .highlights .section-heading h2.heading-airy .no-break {
    white-space: normal;
  }

  .home-page.renters-page .highlights .section-heading h2.heading-airy br {
    display: none;
  }

  .home-page.renters-page .highlights .section-heading h2.heading-airy .no-break::after {
    content: " ";
  }

  /* About headline: "At myroomzie™," stays on its own first line, as on the laptop */
  .home-page .hero h1 .hero-logo-lock {
    display: block;
  }

  /* Hero tagline: "EASY-LIVING" never splits at the hyphen */
  .home-page .hero-tagline {
    letter-spacing: 0.1em;
  }

  .hero-visual-compact .hero-image-wrap {
    height: 300px;
    max-width: min(72%, 290px);
  }

  /* Renters page: space under the room photo so it doesn't sit on the bottom edge of the brown section */
  .home-page.renters-page .hero {
    padding-bottom: 32px;
  }

  /* Android: button labels stay centred, even when they have to wrap onto two lines */
  .button {
    text-align: center;
    line-height: 1.25;
  }

  /* "Check Room Availability" and "Explore Selling Your Property": less side padding so the label fits on one line */
  .home-page .process-cta .button,
  .service-section-actions .button {
    padding: 10px 18px;
  }

  /* "What Our Residents Say" wraps if the phone uses larger text, instead of running off the screen */
  .home-page .testimonials .section-heading h2 {
    white-space: normal;
  }

  /* Headline lines break where the design wants them, but still wrap if the phone uses larger
     text, so nothing pushes the page wider than the screen and gets cut off */
  br.phone-break {
    display: inline;
  }

  .home-page .hero h1 .no-break {
    white-space: normal;
  }

  /* Owners headline: a touch smaller so "Your Rent, On Time." fits on one line even on 360px phones */
  .home-page.owners-page .hero h1 {
    font-size: 35px;
  }

  .home-page .hero-panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Contact page on phones: the message form comes first, company details below it */
@media (max-width: 780px) {
  .contact-page .inquiry-card {
    order: -1;
  }
}

/* PHONE-TABS-2026-09-13: on phones the 5 tabs and the WhatsApp button sit in two rows of three under the logo */
@media (max-width: 780px) {
  .home-page .site-header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  .home-page .site-header .brand {
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: 4px;
    /* put the wordmark letters (not the small TM) and the tagline on the screen's centre line */
    transform: translateX(2.6px);
  }

  /* the tabs become cells of the header grid, so WhatsApp can take the sixth spot */
  .home-page .site-header .site-nav {
    display: contents;
  }

  .home-page .site-header .site-nav a,
  .home-page .site-header .header-button.header-whatsapp {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 48px;
    margin: 0;
    padding: 6px 6px;
    border-radius: 14px;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    scroll-snap-align: none;
  }

  /* the page you are on: orange outline instead of the underline, which would clash with the row below */
  .home-page .site-header .site-nav a::after {
    content: none;
  }

  .home-page .site-header .site-nav a.is-current {
    border-color: rgba(241, 160, 106, 0.7);
    background: rgba(207, 123, 72, 0.22);
    color: #fff5eb;
  }

  .home-page .site-header .header-button.header-whatsapp {
    gap: 5px;
  }

  .home-page .site-header .header-button.header-whatsapp svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
  }

  /* Contact page: "Send Us A Message." may wrap if the phone uses larger text, instead of pushing the form off the screen */
  .contact-page .inquiry-card h2 {
    white-space: normal;
  }
}

/* PHONE-CATALOGS-2026-09-13: on phones the tabs and the WhatsApp button hide behind a 3-line menu button next to the logo and drop down in two rows of three */
.catalog-toggle {
  display: none;
}

@keyframes catalog-drop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 780px) {
  /* logo stays centred; the menu button shares its row, on the right */
  .home-page .site-header .brand {
    grid-row: 1;
  }

  .home-page .site-header .catalog-toggle {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    align-self: center;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* square box kept at the right edge, so it has clear space from the logo */
    width: 48px;
    height: 48px;
    margin: 0 0 4px;
    padding: 0;
    border: 1px solid rgba(255, 245, 235, 0.18);
    border-radius: 14px;
    background: rgba(255, 245, 235, 0.08);
    color: #fff5eb;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms ease, border-color 200ms ease;
  }

  .home-page .site-header .catalog-toggle:focus-visible {
    outline: 2px solid #f1a06a;
    outline-offset: 2px;
  }

  /* the three lines */
  .catalog-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  /* open: the button lights up */
  .home-page .site-header.is-catalog-open .catalog-toggle {
    border-color: rgba(241, 160, 106, 0.6);
    background: rgba(207, 123, 72, 0.22);
  }

  /* closed: only the logo and the menu button show */
  .home-page .site-header:not(.is-catalog-open) .site-nav a,
  .home-page .site-header:not(.is-catalog-open) .header-button.header-whatsapp {
    display: none;
  }

  /* open: the 5 tabs and WhatsApp drop down in two rows of three (cell styling comes from the PHONE-TABS block above) */
  .home-page .site-header.is-catalog-open .site-nav a,
  .home-page .site-header.is-catalog-open .header-button.header-whatsapp {
    animation: catalog-drop 0.26s ease both;
  }

  .home-page .site-header.is-catalog-open .site-nav a:nth-child(2) {
    animation-delay: 0.03s;
  }

  .home-page .site-header.is-catalog-open .site-nav a:nth-child(3) {
    animation-delay: 0.06s;
  }

  .home-page .site-header.is-catalog-open .site-nav a:nth-child(4) {
    animation-delay: 0.09s;
  }

  .home-page .site-header.is-catalog-open .site-nav a:nth-child(5) {
    animation-delay: 0.12s;
  }

  .home-page .site-header.is-catalog-open .header-button.header-whatsapp {
    animation-delay: 0.15s;
  }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .home-page .site-header.is-catalog-open .site-nav a,
  .home-page .site-header.is-catalog-open .header-button.header-whatsapp {
    animation: none;
  }
}

/* WHATSAPP-GREEN-2026-09-13: the header WhatsApp button uses WhatsApp's own green, on phones and laptops */
.site-header .header-button.header-whatsapp {
  border-color: #25d366;
  background: #25d366;
  color: #ffffff;
}

.site-header .header-button.header-whatsapp:hover,
.site-header .header-button.header-whatsapp:focus-visible {
  border-color: #1ebe5d;
  background: #1ebe5d;
}

/* REVIEW-CARD-FIT-2026-09-13: on narrow phones (e.g. 360px Samsung) the review card was wider than its row,
   so its right border and text were cut off; it now never grows past the row */
@media (max-width: 780px) {
  .home-page .testimonial-grid .testimonial-card {
    flex: 0 0 min(304.2px, 100%);
  }
}

/* F-GAP-2026-09-13: Manrope's lowercase f runs into a following l ("flow", "flexible"); a hair of space keeps them apart */
.f-gap,
.home-page .co-living-feature p .f-gap {
  /* the About feature cards style every span like their "01" number; this one must stay plain text */
  display: inline;
  margin: 0 0.05em 0 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* PHONE-PLUS-2026-09-14: on phones the "How Can We Help You?" option cards show a plus icon instead of the arrow */
@media (max-width: 780px) {
  .home-page .about-link-grid .link-card::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23cf7b48' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  }
}

/* PLUS-LAPTOP-2026-09-14: laptops and tablets get the same plus icon instead of the arrow, centred where the arrow was;
   drawn as a mask so it keeps the arrow's colours (orange, lighter orange on hover) */
@media (min-width: 781px) {
  .home-page .about-link-grid .link-card::after {
    content: "";
    top: 26px;
    right: 5px;
    width: 21px;
    height: 21px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* SCROLL-CUE-LEFT-2026-09-14: on phones the light that travels down the scroll-down line is orange, matching the arrowhead.
   (The arrow was briefly moved to the bottom left; it is back at the bottom right as of 2026-09-14.) */
@media (max-width: 780px) {
  .scroll-cue-line::after {
    background: linear-gradient(180deg, rgba(241, 160, 106, 0), #f1a06a);
    box-shadow: 0 0 24px 4px rgba(241, 160, 106, 0.95), 0 0 8px 1px #f1a06a;
  }
}

/* BUTTON-PLUS-2026-09-14: every call-to-action button shows a plus icon after its label, on phones and laptops.
   The header tabs, the WhatsApp button and the menu button are left out. The icon takes the button's text colour. */
.button:not(.header-whatsapp)::after,
.room-details-button::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5em;
  vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15M4.5 12h15' stroke='%23000' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15M4.5 12h15' stroke='%23000' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "I Need a Room Fast!" stacks its content in a column and has a larger label: keep the plus beside the label, sized to it */
.room-types-cta-button {
  flex-direction: row;
}

.room-types-cta-button::after {
  width: 15px;
  height: 15px;
  margin-left: 10px;
}

/* Contact page on phones and tablets: the message form comes first, contact cards below it */
@media (max-width: 1080px) {
  .contact-page .contact-inner .inquiry-card {
    order: -1;
  }
}

/* SCROLL-CUE-UP-2026-09-14: the scroll-down arrow sits higher above the bottom edge of the screen
   on laptops and tablets (fixed px, not vh, so it scales with the fit-to-canvas zoom on laptops).
   Phones keep the arrow at its original place near the bottom edge (restored 2026-09-14). */
@media (min-width: 781px) {
  .scroll-cue {
    bottom: 96px;
  }
}

/* SELECT-SIZE-2026-09-14: on phones Safari draws the two drop-down boxes at its own small size (19px tall);
   draw them like the other fields (42px) with a simple down arrow on the right */
@media (max-width: 780px) {
  .contact-page .inquiry-form select {
    -webkit-appearance: none;
    appearance: none;
    min-height: 42px;
    padding: 8px 44px 8px 16px;
    line-height: 1.2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23241711' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
  }
}

/* Contact form: success note in white */
.contact-page .form-status.is-success,
.form-status.is-success {
  color: #ffffff;
}

/* FORM-TEXT-2026-09-14: bigger typed text in the message form fields.
   The labels shrink the text inside them, so the fields set their own size.
   Phones use 16px, which also stops iPhones zooming in when a field is tapped. */
.contact-page .inquiry-form input:not([type="radio"]):not([type="hidden"]),
.contact-page .inquiry-form select,
.contact-page .inquiry-form textarea {
  font-size: 15px;
  line-height: 1.35;
}

.contact-page .inquiry-form input::placeholder,
.contact-page .inquiry-form textarea::placeholder {
  font-size: 15px;
}

@media (max-width: 780px) {
  .contact-page .inquiry-form input:not([type="radio"]):not([type="hidden"]),
  .contact-page .inquiry-form select,
  .contact-page .inquiry-form textarea,
  .contact-page .inquiry-form input::placeholder,
  .contact-page .inquiry-form textarea::placeholder {
    font-size: 16px;
  }
}

/* Keep the message box at its original laptop height (103px) with the bigger text.
   The box grows with the text from a 4-row start (see the Message box script in app.js). */
@media (min-width: 1081px) {
  .contact-page .inquiry-form textarea {
    min-height: 103px;
    line-height: 1.2;
  }
}

/* CONTACT-DETAILS-2026-09-14: bigger company name, address, phone, WhatsApp and email.
   The registration number is pinned at its previous size so only the details grow. */
.contact-page .contact-item p {
  font-size: 17px;
  line-height: 1.45;
}

.contact-page .contact-item p a {
  font-size: inherit;
}

.contact-page .contact-item .company-registration {
  font-size: 11.3px;
}

@media (max-width: 780px) {
  .contact-page .contact-item p {
    font-size: 16px;
  }

  .contact-page .contact-item .company-registration {
    font-size: 10.9px;
  }
}

/* HEADING-LETTERSPACING-2026-09-14: headings had letters packed very tightly (negative letter-spacing).
   Each tight heading is opened up by the same small step (+0.02em): hero -0.07em -> -0.05em,
   section headings -0.065em -> -0.045em, card headings -0.04em -> -0.02em.
   Uppercase labels and headings that already use normal spacing are not touched. */
.home-page .hero h1 {
  letter-spacing: -0.05em;
}

.home-page .section-heading h2,
.home-page .section-copy h2,
.home-page .contact h2,
.contact-page .inquiry-card h2 {
  letter-spacing: -0.045em;
}

.home-page .highlight-card h3,
.home-page .process-step h3,
.home-page .benefit-card h3,
.home-page .link-card h3 {
  letter-spacing: -0.02em;
}

/* Keep every hero headline breaking at the same words with the looser letters:
   the headline width limit grows by the added spacing (laptop 11ch + 0.36em, the longest
   16-character row x 0.02em plus a hair; tablet 12ch + 0.24em), and the co-living headline is 3.6% smaller on laptops
   so "A Better Way To Live." still fits on its row. */
@media (min-width: 1081px) {
  .home-page .hero h1 {
    max-width: calc(11ch + 0.36em);
  }

  .home-page .hero h1.spaces-headline {
    max-width: none;
    font-size: 77px;
  }
}

@media (min-width: 521px) and (max-width: 1080px) {
  .home-page .hero h1 {
    max-width: calc(12ch + 0.24em);
  }

  .home-page .hero h1.spaces-headline {
    max-width: none;
  }
}

/* STICKY-PHONE-HEADER-2026-09-14: on phones and tablets the header (logo + menu button) stays pinned to the
   top of the screen while scrolling, like on laptops. Earlier phone blocks set it to position: static.
   The thin "Send an enquiry" strip above it still scrolls away to keep the screen free. */
@media (max-width: 780px) {
  .site-header,
  .home-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
  }
}

/* Phones (<=520px): a few headings were already filled edge to edge, so with the looser letters they
   would have pushed a word onto a new row. Each is trimmed by the least amount (3-5%) that keeps its
   original rows, measured at 360-430px. All other headings keep their size. */
@media (max-width: 520px) {
  #rent-to-rent .section-heading h2,
  #management-service .section-heading h2,
  #sell-us-your-home .section-heading h2 {
    font-size: clamp(21.7px, 6.2vw, 26.9px);
  }

  .home-page .hero h1.thank-you-headline {
    font-size: 36px;
  }

  .home-page .link-card h3 {
    font-size: clamp(16.2px, 4.58vw, 20.2px);
  }

  .home-page .spaces .section-heading h2,
  .home-page .shared-spaces .section-heading h2,
  .home-page .spaces.shared-spaces .section-heading h2 {
    font-size: 29px;
  }

  .home-page .testimonials .section-heading h2 {
    font-size: clamp(23.2px, 6.6vw, 28.9px);
  }
}

/* PRIVACY-NOTICE-2026-09-15: Privacy Notice page (privacy.html), the footer link on every page,
   and the short privacy line under the contact form. Sizes in px/rem only (fit-to-canvas). */
.home-page .site-footer .footer-privacy {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  color: rgba(255, 245, 235, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-page .site-footer .footer-privacy:hover,
.home-page .site-footer .footer-privacy:focus-visible {
  color: #f1a06a;
}

.contact-page .form-privacy {
  margin: 0;
  color: rgba(246, 230, 216, 0.78);
  font-size: 0.8rem;
  line-height: 1.5;
}

.contact-page .form-privacy a {
  white-space: nowrap;
  color: #f1a06a;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-page .privacy-intro {
  width: min(calc(100% - 40px), 880px);
  margin: 0 auto 32px;
  padding: 72px 0 8px;
  color: var(--cream-text);
}

.privacy-page .privacy-intro .eyebrow {
  color: #f1a06a;
}

.privacy-page .privacy-intro h1 {
  margin: 0 0 16px;
  color: #fff8f1;
  font-family: "Manrope", sans-serif;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.privacy-page .privacy-lead {
  max-width: 640px;
  margin: 0 0 24px;
  color: rgba(255, 245, 235, 0.82);
  font-size: 1.1rem;
  line-height: 1.6;
}

.privacy-page .privacy-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.privacy-page .privacy-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 245, 235, 0.3);
  border-radius: 999px;
  color: #fff8f1;
  font-weight: 700;
  transition: background 180ms ease, border-color 180ms ease;
}

.privacy-page .privacy-lang a:hover,
.privacy-page .privacy-lang a:focus-visible {
  border-color: #f1a06a;
  background: rgba(241, 160, 106, 0.16);
}

.privacy-page .privacy-updated {
  margin: 0;
  color: rgba(255, 245, 235, 0.6);
  font-size: 0.85rem;
}

.privacy-page .privacy-notice.section-card {
  width: min(calc(100% - 40px), 880px);
  margin: 0 auto 32px;
  padding: 56px 64px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  background: linear-gradient(180deg, #fffcf8 0%, #fff6ee 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
  color: var(--ink);
  scroll-margin-top: 110px;
}

.privacy-page .privacy-notice .eyebrow {
  color: var(--accent-deep);
}

.privacy-page .privacy-notice h2 {
  margin: 36px 0 12px;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.privacy-page .privacy-notice h2.privacy-notice-title {
  margin-top: 0;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.privacy-page .privacy-notice p,
.privacy-page .privacy-notice li,
.privacy-page .privacy-contact {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}

.privacy-page .privacy-notice p {
  margin: 0 0 12px;
}

.privacy-page .privacy-notice ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.privacy-page .privacy-notice li + li {
  margin-top: 6px;
}

.privacy-page .privacy-notice li::marker {
  color: var(--accent);
}

.privacy-page .privacy-notice strong {
  color: var(--ink);
}

.privacy-page .privacy-notice a {
  color: var(--accent-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-page .privacy-summary {
  padding: 18px 22px;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: rgba(207, 123, 72, 0.1);
}

.privacy-page .privacy-contact {
  font-style: normal;
}

@media (max-width: 780px) {
  .privacy-page .privacy-intro {
    width: calc(100% - 32px);
    padding-top: 40px;
  }

  .privacy-page .privacy-intro h1 {
    font-size: 42px;
  }

  .privacy-page .privacy-notice.section-card {
    width: calc(100% - 24px);
    padding: 28px 22px;
    border-radius: 22px;
  }

  .privacy-page .privacy-notice h2 {
    margin-top: 28px;
    font-size: 1.25rem;
  }

  .privacy-page .privacy-notice h2.privacy-notice-title {
    font-size: 2rem;
  }

  .privacy-page .privacy-notice p,
  .privacy-page .privacy-notice li,
  .privacy-page .privacy-contact {
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
}

/* Privacy Notice footer link: bigger tap area on phones without changing how it looks */
@media (max-width: 780px) {
  .home-page .site-footer .footer-privacy {
    margin-top: 0;
    padding: 12px 16px;
  }
}