@font-face {
  font-family: "Archivo Black";
  src: url("assets/fonts/archivo-black-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand: #1f5b53;
  --brand-2: #d69a46;
  --brand-on: #fff;
  --secondary-on: #17252c;
  --brand-text: #1f5b53;
  --secondary-text: #87560f;
  --ink: #17252c;
  --ink-soft: #53636a;
  --blue: var(--brand-deep, #163f5b);
  --land: var(--brand-mid, #41695d);
  --paper: #f3f5f1;
  --line: #ced7d3;
  --white: #fff;
  --max: 1240px;
  --header: 82px;
  --focus: var(--brand-deep, #163f5b);
  --display: "Archivo Black", sans-serif;
  --condensed: "Barlow Condensed", sans-serif;
  --body: "Barlow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { scrollbar-color: var(--brand) var(--paper); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--brand); border: 3px solid var(--paper); }
::selection { background: var(--brand); color: var(--brand-on); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; caret-color: var(--brand); }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 999;
  left: 16px;
  top: 10px;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
}
.skip-link:focus { transform: none; }
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--focus);
}
.icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.text-link, .property-facts a, .section-foot a, .paths a, .route-copy a, .agent-card a, .contact-strip-actions a, .detail-ledger a, .contact-card > a { display: inline-flex; align-items: center; gap: 7px; }

.site-header {
  min-height: var(--header);
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}
.header-inner {
  width: min(1420px, calc(100% - 48px));
  min-height: var(--header);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 26px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; text-decoration: none; }
.brand-logo { width: auto; height: 48px; object-fit: contain; }
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--brand-text);
  font: 700 15px/1 var(--condensed);
  letter-spacing: .05em;
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: var(--brand-2);
}
.brand-name { display: grid; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.brand-name small {
  margin-top: 5px;
  color: var(--ink-soft);
  font: 600 10px/1 var(--condensed);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.site-menu { display: flex; align-items: center; gap: 28px; }
.site-menu a {
  padding-block: 27px 24px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  color: #35464d;
  font-weight: 600;
  font-size: 15px;
}
.site-menu a:hover, .site-menu a[aria-current="page"] { color: var(--ink); border-color: var(--brand); }
.header-book {
  justify-self: end;
  display: inline-flex;
  gap: 22px;
  align-items: center;
  min-height: 46px;
  padding: 0 16px 0 19px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
}
.header-book .icon { color: var(--accent-light, #f4c46e); }
.menu-toggle { display: none; border: 0; background: none; }

.hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background: var(--blue);
  color: var(--white);
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-filter {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,32,45,.87) 0%, rgba(10,32,45,.63) 38%, rgba(10,32,45,.12) 68%, rgba(10,32,45,.18) 100%),
    linear-gradient(0deg, rgba(8,26,37,.56) 0%, transparent 42%);
}
.hero-grid {
  position: relative;
  z-index: 1;
  width: min(1420px, calc(100% - 64px));
  min-height: 660px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(280px, 360px);
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding: 70px 0 132px;
}
.hero-copy { max-width: 720px; }
.route-stamp, .ledger-index {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 18px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  color: inherit;
  font: 600 13px/1.2 var(--condensed);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.route-stamp span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 27px;
  margin-right: 12px;
  background: var(--brand-2);
  color: var(--secondary-on);
  letter-spacing: .04em;
}
.hero h1 {
  max-width: 740px;
  margin: 0;
  font: 400 clamp(48px, 6.3vw, 92px)/.94 var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero-copy > p:not(.route-stamp) { max-width: 600px; margin: 25px 0 0; color: rgba(255,255,255,.88); font-size: 19px; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 33px; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 23px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}
.btn-primary { background: var(--brand); color: var(--brand-on); }
.btn-primary:hover { filter: brightness(.9); }
.btn-light { background: var(--white); color: var(--ink); }
.text-link { color: var(--white); text-underline-offset: 6px; font-weight: 600; }
.hero-ledger {
  align-self: end;
  margin-bottom: 74px;
  border-top: 4px solid var(--brand-2);
  background: rgba(10,31,43,.8);
  backdrop-filter: blur(10px);
}
.hero-ledger > p { margin: 0; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.22); font: 600 12px/1 var(--condensed); text-transform: uppercase; letter-spacing: .16em; }
.hero-ledger ol { margin: 0; padding: 0; list-style: none; }
.hero-ledger li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.16); }
.hero-ledger li:last-child { border-bottom: 0; }
.hero-ledger b { grid-row: 1 / 3; color: var(--accent-light, #f4c46e); font: 600 15px/1.2 var(--condensed); }
.hero-ledger span { font-weight: 700; }
.hero-ledger small { color: rgba(255,255,255,.7); }

.search-dock { position: relative; z-index: 5; margin-top: -82px; }
.property-finder {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr auto;
  min-height: 112px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(18,45,57,.14);
}
.property-finder fieldset, .property-finder > label { margin: 0; padding: 19px 24px; border: 0; border-right: 1px solid var(--line); min-width: 0; }
.property-finder legend, .property-finder > label > span { display: block; margin-bottom: 10px; color: var(--ink-soft); font: 600 11px/1 var(--condensed); text-transform: uppercase; letter-spacing: .14em; }
.property-finder fieldset { display: flex; flex-wrap: wrap; gap: 7px; align-content: center; }
.property-finder legend { width: 100%; padding: 0; }
.property-finder fieldset label { cursor: pointer; }
.property-finder fieldset input { position: absolute; opacity: 0; }
.property-finder fieldset span { display: block; padding: 7px 11px; border: 1px solid var(--line); font-weight: 600; line-height: 1; }
.property-finder fieldset input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.property-finder fieldset input:focus-visible + span { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--focus); }
.property-finder select { width: 100%; border: 0; background: transparent; color: var(--ink); font-weight: 600; min-height: 32px; }
.property-finder button { border: 0; padding: 0 25px; background: var(--ink); color: var(--white); font-weight: 700; cursor: pointer; }
.property-finder button .icon { margin-left: 18px; color: var(--accent-light, #f4c46e); }

.section { padding: 112px 0; }
.section-heading { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: end; margin-bottom: 54px; }
.ledger-index { color: var(--ink); border-color: var(--brand); }
.section-heading h2, .process-head h2, .route-copy h2, .agent-statement h2, .agency-story h2 {
  max-width: 760px;
  margin: 0;
  font: 400 clamp(34px, 4.5vw, 66px)/.98 var(--display);
  letter-spacing: -.04em;
}
.section-heading > p { margin: 0; color: var(--ink-soft); }
.property-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.property-card { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); min-height: 330px; background: var(--white); }
.property-card:nth-child(even) { grid-template-columns: minmax(360px, 1.08fr) minmax(0, .92fr); }
.property-card:nth-child(even) .property-photo { grid-column: 2; grid-row: 1; }
.property-card:nth-child(even) .property-copy { grid-column: 1; grid-row: 1; }
.property-photo { position: relative; overflow: hidden; background: #dfe5e1; }
.property-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.property-card:hover .property-photo img { transform: scale(1.025); }
.property-index, .property-purpose { position: absolute; top: 16px; padding: 8px 10px; font: 700 12px/1 var(--condensed); text-transform: uppercase; letter-spacing: .09em; }
.property-index { left: 16px; background: var(--white); color: var(--ink); }
.property-purpose { right: 16px; background: var(--brand); color: var(--brand-on); }
.property-copy { display: flex; flex-direction: column; justify-content: center; padding: 38px 44px; }
.property-place { display: flex; justify-content: space-between; gap: 18px; color: var(--ink-soft); font: 600 12px/1.2 var(--condensed); text-transform: uppercase; letter-spacing: .12em; }
.property-copy h3 { margin: 30px 0 14px; font: 700 clamp(28px, 3vw, 44px)/1 var(--condensed); letter-spacing: -.035em; }
.property-copy h3 a { text-decoration: none; }
.property-price { margin: 0; color: var(--brand-text); font-size: 21px; font-weight: 700; }
.property-facts { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 30px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.property-facts a { color: var(--ink); font-weight: 700; text-underline-offset: 5px; }
.section-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; color: var(--ink-soft); }
.section-foot p { margin: 0; }
.section-foot a { color: var(--ink); font-weight: 700; }

.paths { display: grid; grid-template-columns: 1fr 1fr; }
.paths > div { min-height: 520px; padding: 70px max(48px, calc((100vw - var(--max))/2 + 24px)); display: flex; flex-direction: column; align-items: flex-start; }
.path-sale { background: var(--blue); color: var(--white); }
.path-rent { background: var(--paper); color: var(--ink); }
.paths h2 { max-width: 540px; margin: 0; font: 400 clamp(38px, 4.5vw, 66px)/.98 var(--display); letter-spacing: -.04em; }
.paths p:not(.ledger-index) { max-width: 500px; margin: 25px 0; }
.paths a { margin-top: auto; font-weight: 700; text-underline-offset: 6px; }
.path-rent .ledger-index { color: var(--ink); }

.neighbourhoods { background: var(--paper); }
.route-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 100px; align-items: center; }
.route-map { min-height: 410px; position: relative; padding: 25px 0; }
.route-line { position: absolute; left: 35px; top: 45px; bottom: 45px; width: 2px; background: var(--line); overflow: hidden; }
.route-line::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleY(var(--route-scale, .333333)); transform-origin: top; transition: transform .38s cubic-bezier(.2,.75,.25,1); }
.route-stop { width: 100%; position: relative; z-index: 1; display: grid; grid-template-columns: 70px 1fr; align-items: center; margin: 0 0 44px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.route-stop b { width: 70px; height: 70px; display: grid; place-items: center; border: 2px solid var(--line); background: var(--paper); font: 700 15px/1 var(--condensed); transition: transform .38s cubic-bezier(.2,.75,.25,1), background-color .25s ease, color .25s ease; }
.route-stop span { padding: 18px 24px; border-bottom: 1px solid var(--line); font: 700 31px/1 var(--condensed); }
.route-stop.is-active b { background: var(--brand); border-color: var(--brand); color: var(--brand-on); transform: translateX(6px); }
.route-stop.is-active span { border-color: var(--brand); }
.route-copy > div { margin-top: 45px; padding-left: 24px; border-left: 1px solid var(--brand-2); }
.route-copy > div.is-refreshing { animation: route-copy-in .38s cubic-bezier(.2,.75,.25,1); }
@keyframes route-copy-in { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.route-copy h3 { margin: 0 0 12px; font: 700 30px/1 var(--condensed); }
.route-copy p { color: var(--ink-soft); }
.route-copy a { font-weight: 700; }

.viewing-process { padding: 108px 0; background: var(--land); color: var(--white); }
.viewing-process .ledger-index { color: var(--white); border-color: rgba(255,255,255,.55); }
.process-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.process-head > p { margin: 0; color: rgba(255,255,255,.9); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 64px 0 46px; padding: 0; border-top: 1px solid rgba(255,255,255,.28); list-style: none; }
.process-steps li { min-height: 230px; padding: 26px 24px 20px 0; border-right: 1px solid rgba(255,255,255,.28); }
.process-steps li + li { padding-left: 24px; }
.process-steps b { color: var(--white); font: 700 14px/1 var(--condensed); }
.process-steps h3 { margin: 55px 0 8px; font: 700 25px/1 var(--condensed); }
.process-steps p { margin: 0; color: rgba(255,255,255,.9); }

.agent-layout { display: grid; grid-template-columns: 1.1fr .72fr; gap: 56px 90px; }
.agent-statement p:last-child { max-width: 620px; color: var(--ink-soft); }
.agent-card { align-self: start; display: grid; grid-template-columns: 76px 1fr; gap: 18px; padding: 24px; border: 1px solid var(--line); }
.agent-monogram { width: 76px; height: 92px; display: grid; place-items: center; background: var(--blue); color: var(--white); font: 700 20px/1 var(--condensed); }
.agent-card p, .agent-card h3, .agent-card span { margin: 0; }
.agent-card p { color: var(--ink-soft); font: 600 11px/1 var(--condensed); text-transform: uppercase; letter-spacing: .13em; }
.agent-card h3 { margin-top: 10px; font: 700 25px/1 var(--condensed); }
.agent-card a { grid-column: 1 / -1; margin-top: 8px; font-weight: 700; }
.agent-layout blockquote { grid-column: 1 / -1; margin: 0; padding: 38px 0 0 28%; border-top: 1px solid var(--line); font: 500 clamp(28px, 4vw, 52px)/1.08 var(--condensed); }

.contact-strip { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding: 54px max(48px, calc((100vw - var(--max))/2 + 24px)); background: var(--brand-2); color: var(--secondary-on); }
.contact-strip .ledger-index { color: var(--secondary-on); border-color: currentColor; }
.contact-strip h2 { margin: 0; font: 700 clamp(32px, 4vw, 54px)/1 var(--condensed); }
.contact-strip-actions { display: flex; justify-content: flex-end; gap: 28px; }
.contact-strip-actions a { font-weight: 700; text-underline-offset: 6px; }
.closing { min-height: 310px; display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 46px; padding: 58px max(48px, calc((100vw - var(--max))/2 + 24px)); border-bottom: 1px solid var(--line); }
.closing-number { align-self: stretch; display: grid; place-items: center; border: 1px solid var(--line); color: var(--brand-text); font: 700 18px/1 var(--condensed); }
.closing p { margin: 0 0 7px; color: var(--ink-soft); }
.closing h2 { margin: 0; font: 400 clamp(35px, 4.5vw, 64px)/1 var(--display); letter-spacing: -.04em; }

.site-footer { background: var(--white); color: var(--ink); }
.footer-grid { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(3, .75fr); gap: 55px; padding: 76px 0 54px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-grid > div:first-child > p { max-width: 330px; color: var(--ink-soft); }
.footer-grid a:not(.brand) { text-decoration: none; }
.footer-grid a:not(.brand):hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-label { margin: 0 0 10px; color: var(--brand-text); font: 700 12px/1 var(--condensed); text-transform: uppercase; letter-spacing: .14em; }
.footer-grid p { margin: 0; }
.footer-cta { font-weight: 700; }
.footer-bottom { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; display: flex; justify-content: space-between; gap: 24px; padding: 21px 0 28px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; }

.page-intro { width: min(var(--max), calc(100% - 48px)); min-height: 360px; margin-inline: auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; }
.page-intro h1 { max-width: 820px; margin: 0; font: 400 clamp(48px, 6vw, 86px)/.95 var(--display); letter-spacing: -.04em; }
.page-intro > p { color: var(--ink-soft); font-size: 19px; }
.catalogue-tools { border-block: 1px solid var(--line); background: var(--paper); padding: 18px 0; }
.property-finder.is-compact { min-height: 96px; box-shadow: none; }
.catalogue-section { padding-top: 60px; }
.catalogue-meta { display: flex; justify-content: space-between; gap: 25px; margin-bottom: 24px; color: var(--ink-soft); }
.catalogue-meta p { margin: 0; }
.catalogue-meta b { color: var(--ink); }
.empty-filter { padding: 60px; text-align: center; background: var(--paper); }

.detail-breadcrumb { width: min(var(--max), calc(100% - 48px)); margin: 24px auto; display: flex; gap: 10px; color: var(--ink-soft); font-size: 14px; }
.detail-hero { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 610px; }
.detail-hero figure { min-height: 610px; position: relative; margin: 0; overflow: hidden; background: var(--paper); }
.detail-hero figure img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero figcaption { position: absolute; left: 22px; bottom: 22px; padding: 9px 12px; background: var(--white); font: 700 12px/1 var(--condensed); text-transform: uppercase; letter-spacing: .1em; }
.detail-summary { display: flex; flex-direction: column; justify-content: center; padding: 54px clamp(36px, 5vw, 80px); background: var(--blue); color: var(--white); }
.detail-summary h1 { margin: 0; font: 400 clamp(40px, 5vw, 70px)/.98 var(--display); letter-spacing: -.04em; }
.detail-summary > p:not(.route-stamp):not(.detail-price):not(.agent-line) { color: rgba(255,255,255,.88); }
.detail-price { margin: 25px 0 5px; color: var(--accent-light, #f4c46e); font-size: 25px; font-weight: 700; }
.detail-summary .btn { align-self: flex-start; margin-top: 20px; }
.agent-line { margin-top: 16px; color: rgba(255,255,255,.68); font-size: 14px; }
.detail-ledger { width: min(var(--max), calc(100% - 48px)); margin: 80px auto 110px; display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 50px; }
.detail-ledger > div, .detail-ledger aside { padding-top: 20px; border-top: 4px solid var(--ink); }
.detail-ledger dl { margin: 0; }
.detail-ledger dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail-ledger dt { color: var(--ink-soft); }
.detail-ledger dd { margin: 0; font-weight: 700; }
.detail-ledger ul { padding-left: 20px; }
.detail-ledger li { margin: 8px 0; }
.detail-ledger aside { border-color: var(--brand-2); }
.missing-property { min-height: 520px; padding: 110px 24px; text-align: center; }
.missing-property h1 { margin: 0; font: 400 clamp(40px, 5vw, 70px)/1 var(--display); letter-spacing: -.04em; }

.booking-page { min-height: 760px; display: grid; grid-template-columns: .86fr 1.14fr; background: var(--paper); }
.booking-intro { padding: 80px max(40px, calc((100vw - var(--max))/2 + 24px)); background: var(--blue); color: var(--white); }
.booking-intro h1 { max-width: 620px; margin: 0; font: 400 clamp(43px, 5.5vw, 78px)/.96 var(--display); letter-spacing: -.04em; }
.booking-intro > p { max-width: 560px; color: rgba(255,255,255,.9); }
.booking-intro ol { margin: 60px 0 0; padding: 0; list-style: none; }
.booking-intro li { display: grid; grid-template-columns: 50px 1fr; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.25); }
.booking-intro li b { color: var(--white); font: 700 13px/1.5 var(--condensed); }
.booking-panel { display: grid; place-items: center; padding: 56px clamp(28px, 6vw, 95px); }
.booking-panel form, .booking-success { width: min(680px, 100%); }
.form-head { display: flex; justify-content: space-between; gap: 25px; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 4px solid var(--ink); font: 700 13px/1 var(--condensed); text-transform: uppercase; letter-spacing: .13em; }
.form-head b { color: var(--brand-text); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.booking-panel label { display: grid; gap: 8px; margin-bottom: 18px; }
.booking-panel label > span { color: var(--ink-soft); font: 600 12px/1.2 var(--condensed); text-transform: uppercase; letter-spacing: .1em; }
.booking-panel input, .booking-panel select, .booking-panel textarea { width: 100%; min-height: 52px; border: 1px solid #b8c4bf; border-radius: 0; background: var(--white); padding: 12px 13px; color: var(--ink); }
.booking-panel textarea { resize: vertical; }
.booking-panel .consent { grid-template-columns: 20px 1fr; align-items: start; }
.booking-panel .consent input { min-height: 18px; width: 18px; margin: 1px 0 0; }
.booking-panel .consent span { text-transform: none; letter-spacing: 0; line-height: 1.45; }
.booking-panel .btn { width: 100%; border: 0; }
.booking-panel .btn:disabled { cursor: wait; opacity: .58; }
.form-note { color: var(--ink-soft); font-size: 14px; }
.booking-status { min-height: 22px; margin: 12px 0 0; color: #9a2d25; font-size: 14px; font-weight: 650; }
.booking-success { text-align: center; }
.success-mark { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 25px; background: var(--brand); color: var(--brand-on); font-size: 34px; }
.booking-success h2 { max-width: 560px; margin: 0 auto 18px; font: 400 clamp(38px, 5vw, 60px)/1 var(--display); letter-spacing: -.04em; }
.booking-success .btn { width: auto; margin-top: 20px; }
.booking-success button { display: block; margin: 18px auto 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }

.agency-story { background: var(--paper); }
.agency-story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; }
.agency-story-grid > div:last-child { color: var(--ink-soft); font-size: 19px; }
.agency-principles { display: grid; grid-template-columns: repeat(3, 1fr); }
.agency-principles article { min-height: 330px; padding: 56px max(38px, calc((100vw - var(--max))/6)); border-right: 1px solid var(--line); }
.agency-principles b { color: var(--brand-text); font: 700 14px/1 var(--condensed); }
.agency-principles h3 { margin: 90px 0 10px; font: 700 30px/1 var(--condensed); }
.agency-principles p { color: var(--ink-soft); }

.contact-page { min-height: 700px; display: grid; grid-template-columns: 1.15fr .85fr; }
.contact-copy { padding: 90px max(48px, calc((100vw - var(--max))/2 + 24px)); }
.contact-copy h1 { max-width: 760px; margin: 0; font: 400 clamp(50px, 6vw, 86px)/.95 var(--display); letter-spacing: -.04em; }
.contact-copy > p:not(.route-stamp) { max-width: 620px; color: var(--ink-soft); }
.contact-ledger { margin-top: 58px; border-top: 4px solid var(--ink); }
.contact-ledger > div { display: grid; grid-template-columns: 100px 1fr; gap: 25px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.contact-ledger span { color: var(--brand-text); font: 700 12px/1.5 var(--condensed); text-transform: uppercase; letter-spacing: .1em; }
.contact-ledger p { margin: 0; }
.contact-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 70px clamp(38px, 6vw, 90px); background: var(--land); color: var(--white); }
.contact-card .ledger-index { color: var(--white); border-color: rgba(255,255,255,.55); }
.contact-card h2 { margin: 0; font: 400 clamp(42px, 5vw, 70px)/.97 var(--display); letter-spacing: -.04em; }
.contact-card > p:not(.ledger-index) { color: rgba(255,255,255,.88); }
.contact-card .btn { margin: 24px 0 20px; }
.policy-page .wrap { display: grid; gap: 0; }
.policy-page article { display: grid; grid-template-columns: 70px .7fr 1fr; gap: 35px; padding: 32px 0; border-top: 1px solid var(--line); }
.policy-page article > b { color: var(--brand-text); font: 700 14px/1.5 var(--condensed); }
.policy-page h2, .policy-page p { margin: 0; }
.policy-page h2 { font: 700 28px/1.05 var(--condensed); }
.policy-page p { color: var(--ink-soft); }
.not-found { min-height: 620px; padding: 100px 24px; text-align: center; background: var(--paper); }
.not-found > span { display: block; color: var(--secondary-text); font: 400 clamp(100px, 20vw, 260px)/.75 var(--display); letter-spacing: -.04em; }
.not-found h1 { margin: 32px 0 10px; font: 400 clamp(40px, 5vw, 68px)/1 var(--display); letter-spacing: -.04em; }
.toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: 360px; padding: 13px 17px; background: var(--ink); color: var(--white); box-shadow: 0 16px 44px rgba(0,0,0,.2); transform: translateY(150%); transition: transform .25s ease; }
.toast.is-visible { transform: none; }

@media (max-width: 1040px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .site-menu { position: absolute; z-index: 1; inset: var(--header) 0 auto; display: none; padding: 14px 24px 26px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(15,35,45,.12); }
  .site-menu.is-open { display: grid; }
  .site-menu a { padding: 14px 0; }
  .header-book { display: none; }
  .menu-toggle { justify-self: end; display: grid; grid-template-columns: 25px auto; align-items: center; gap: 3px 9px; padding: 10px 0; cursor: pointer; }
  .menu-toggle span { grid-column: 1; width: 25px; height: 2px; background: var(--ink); }
  .menu-toggle b { grid-column: 2; grid-row: 1 / 4; font-size: 14px; }
  .hero-grid { grid-template-columns: 1fr; align-items: center; }
  .hero-ledger { display: none; }
  .property-finder { grid-template-columns: 1.2fr 1fr 1fr; }
  .property-finder button { grid-column: 1 / -1; min-height: 54px; }
  .route-layout { gap: 50px; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-steps li:nth-child(2) { border-right: 0; }
  .process-steps li:nth-child(3), .process-steps li:nth-child(4) { border-top: 1px solid rgba(255,255,255,.28); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero figure { min-height: 520px; }
  .detail-ledger { grid-template-columns: 1fr 1fr; }
  .detail-ledger aside { grid-column: 1 / -1; }
  .booking-page { grid-template-columns: 1fr; }
  .booking-intro { padding-block: 70px; }
}

@media (max-width: 760px) {
  :root { --header: 70px; }
  body { font-size: 16px; }
  .wrap, .footer-grid, .footer-bottom, .detail-breadcrumb, .detail-ledger, .page-intro { width: min(100% - 32px, var(--max)); }
  .header-inner { width: calc(100% - 32px); }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 15px; }
  .brand-name small { font-size: 8px; }
  .brand-logo { height: 40px; max-width: 170px; }
  .hero { min-height: 610px; }
  .hero-photo { object-position: 61% center; }
  .hero-filter { background: linear-gradient(90deg, rgba(9,29,40,.88), rgba(9,29,40,.42)), linear-gradient(0deg, rgba(9,29,40,.66), transparent 55%); }
  .hero-grid { width: calc(100% - 32px); min-height: 610px; padding: 58px 0 154px; }
  .hero h1 { max-width: 580px; font-size: clamp(43px, 13vw, 67px); letter-spacing: -.04em; }
  .hero-copy > p:not(.route-stamp) { font-size: 17px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 26px; }
  .search-dock { margin-top: -112px; }
  .property-finder { grid-template-columns: 1fr 1fr; min-height: 0; }
  .property-finder fieldset { grid-column: 1 / -1; }
  .property-finder fieldset, .property-finder > label { padding: 15px; }
  .property-finder > label:nth-of-type(2) { border-right: 0; }
  .section { padding: 76px 0; }
  .section-heading, .process-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 36px; }
  .section-heading h2, .process-head h2, .route-copy h2, .agent-statement h2, .agency-story h2 { font-size: clamp(35px, 11vw, 52px); }
  .property-card, .property-card:nth-child(even) { grid-template-columns: 1fr; min-height: 0; }
  .property-card:nth-child(even) .property-photo, .property-card:nth-child(even) .property-copy { grid-column: auto; grid-row: auto; }
  .property-photo { aspect-ratio: 4 / 3; }
  .property-copy { min-height: 285px; padding: 30px 24px; }
  .property-copy h3 { margin-top: 24px; }
  .property-facts { align-items: flex-start; flex-direction: column; }
  .section-foot, .catalogue-meta { align-items: flex-start; flex-direction: column; }
  .paths { grid-template-columns: 1fr; }
  .paths > div { min-height: 420px; padding: 55px 24px; }
  .route-layout { grid-template-columns: 1fr; gap: 20px; }
  .route-map { min-height: 310px; }
  .route-stop { margin-bottom: 28px; }
  .route-stop b { width: 58px; height: 58px; }
  .route-line { left: 29px; }
  .viewing-process { padding: 76px 0; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li, .process-steps li + li { min-height: 0; padding: 22px 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.28); }
  .process-steps h3 { margin-top: 20px; }
  .agent-layout { grid-template-columns: 1fr; gap: 38px; }
  .agent-layout blockquote { grid-column: auto; padding-left: 0; }
  .contact-strip { grid-template-columns: 1fr; gap: 24px; padding: 42px 24px; }
  .contact-strip-actions { flex-direction: column; justify-content: flex-start; gap: 12px; }
  .closing { grid-template-columns: 54px 1fr; gap: 22px; padding: 48px 24px; }
  .closing .btn { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 28px; padding-top: 58px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .page-intro { min-height: 330px; grid-template-columns: 1fr; gap: 25px; padding: 55px 0; }
  .page-intro h1 { font-size: clamp(45px, 14vw, 67px); }
  .property-finder.is-compact { grid-template-columns: 1fr 1fr; }
  .catalogue-tools { padding: 0; }
  .catalogue-tools .wrap { width: 100%; }
  .detail-hero figure { min-height: 350px; }
  .detail-summary { padding: 42px 24px; }
  .detail-summary h1 { font-size: clamp(40px, 12vw, 59px); }
  .detail-ledger { grid-template-columns: 1fr; margin-block: 55px 75px; }
  .detail-ledger aside { grid-column: auto; }
  .booking-intro, .booking-panel { padding: 54px 20px; }
  .booking-intro h1 { font-size: clamp(41px, 13vw, 61px); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .agency-story-grid { grid-template-columns: 1fr; gap: 28px; }
  .agency-principles { grid-template-columns: 1fr; }
  .agency-principles article { min-height: 250px; padding: 46px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .agency-principles h3 { margin-top: 55px; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-copy, .contact-card { padding: 58px 24px; }
  .contact-copy h1 { font-size: clamp(45px, 14vw, 66px); }
  .contact-ledger > div { grid-template-columns: 75px 1fr; }
  .policy-page article { grid-template-columns: 40px 1fr; gap: 18px; }
  .policy-page article p { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   PROPERTY COASTLINE
   A low, panoramic Douala direction: horizon lines, tide markers and compact
   listing rails. Brand colours remain intake-driven through --brand/--brand-2.
   -------------------------------------------------------------------------- */

:root {
  --coast-deep: var(--brand-deep, #0d2f3d);
  --coast-ink: var(--brand-deeper, #173440);
  --coast-mist: var(--brand-tint, #edf4f3);
  --coast-sand: #f7f4ec;
  --coast-line: var(--brand-wash, #c6d5d4);
  --display: "Barlow Condensed", sans-serif;
  --body: "Barlow", sans-serif;
  --max: 1320px;
  --header: 70px;
}

body { color: var(--coast-ink); background: #fff; font-size: 16px; }
.wrap { width: min(var(--max), calc(100% - 64px)); }
.route-stamp,
.ledger-index {
  padding: 0 0 7px;
  border: 0;
  border-bottom: 2px solid currentColor;
  font-size: 11px;
  letter-spacing: .18em;
}
.route-stamp span {
  width: 30px;
  height: 24px;
  margin-right: 10px;
  border-radius: 999px;
}

/* The shell stays quiet so the generated or uploaded logo always wins. */
.site-header {
  min-height: var(--header);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.985);
  border-color: var(--coast-line);
  backdrop-filter: blur(16px);
}
.header-inner {
  width: min(1460px, calc(100% - 56px));
  min-height: var(--header);
  grid-template-columns: minmax(230px, 1fr) auto minmax(170px, 1fr);
  gap: 32px;
}
.brand-mark { width: 40px; height: 40px; border-radius: 50%; border-color: var(--coast-ink); }
.brand-mark::after { width: 11px; height: 11px; right: -2px; bottom: -2px; border-radius: 50%; }
.brand-name { font-size: 16px; }
.site-menu { gap: 34px; }
.site-menu a {
  padding: 25px 0 21px;
  border-bottom-width: 2px;
  color: #50676f;
  font-size: 14px;
}
.header-book {
  min-height: 38px;
  padding-inline: 17px;
  gap: 13px;
  border-radius: 999px;
  background: var(--coast-deep);
  font-size: 14px;
}

/* Signature: the city ledger becomes a slim tide-line ticker across the
   panoramic hero instead of Property Ledger's tall side panel. */
.hero { min-height: 550px; background: var(--coast-deep); }
.hero-photo { object-position: center 52%; }
.hero-filter {
  background:
    linear-gradient(90deg, rgba(5,35,48,.88) 0%, rgba(5,35,48,.64) 38%, rgba(5,35,48,.18) 72%),
    linear-gradient(0deg, rgba(5,35,48,.72) 0%, transparent 46%);
}
.hero-grid {
  width: min(1460px, calc(100% - 64px));
  min-height: 550px;
  grid-template-columns: minmax(0, 690px) 1fr;
  align-items: center;
  padding: 54px 0 112px;
}
.hero-copy { align-self: center; }
.hero h1 {
  max-width: 660px;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: .94;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.hero-copy > p:not(.route-stamp) { max-width: 540px; margin-top: 18px; font-size: 17px; }
.hero-actions { margin-top: 25px; gap: 20px; }
.btn { min-height: 46px; padding-inline: 20px; border-radius: 999px; }
.hero-ledger {
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.28);
  border-top: 3px solid var(--brand-2);
  background: rgba(7,38,50,.84);
  backdrop-filter: blur(13px);
}
.hero-ledger > p { display: grid; place-items: center start; padding: 12px 18px; border: 0; border-right: 1px solid rgba(255,255,255,.22); }
.hero-ledger ol { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-ledger li,
.hero-ledger li:last-child {
  grid-template-columns: 26px 1fr;
  padding: 10px 16px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.18);
}
.hero-ledger li:last-child { border-right: 0; }
.hero-ledger b { color: var(--brand-2); }

.search-dock { margin-top: -34px; }
.property-finder {
  min-height: 96px;
  border-radius: 18px;
  overflow: hidden;
  border-color: var(--coast-line);
  box-shadow: 0 20px 55px rgba(20,52,64,.12);
}
.property-finder fieldset,
.property-finder > label { padding: 15px 21px; border-color: var(--coast-line); }
.property-finder fieldset span { border-radius: 999px; }
.property-finder button { background: var(--coast-deep); }

.section { padding: 88px 0; }
.section-heading { grid-template-columns: .82fr 1.18fr; gap: 70px; margin-bottom: 38px; }
.section-heading > div { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.section-heading h2,
.process-head h2,
.route-copy h2,
.agent-statement h2,
.agency-story h2 {
  max-width: 760px;
  font-size: clamp(38px, 4.1vw, 58px);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* Featured inventory reads as an airy waterfront rail, not alternating rows. */
.property-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  border: 0;
  background: transparent;
}
.property-card,
.property-card:nth-child(even) {
  grid-template-columns: 1fr;
  min-height: 0;
  border: 1px solid var(--coast-line);
  border-radius: 20px;
  overflow: hidden;
}
.property-card:nth-child(even) .property-photo,
.property-card:nth-child(even) .property-copy { grid-column: auto; grid-row: auto; }
.property-photo { aspect-ratio: 16 / 9; }
.property-index,
.property-purpose { top: 14px; border-radius: 999px; }
.property-copy { min-height: 250px; padding: 26px 28px; }
.property-place { color: #637a81; }
.property-copy h3 { margin: 20px 0 10px; font-size: clamp(27px, 2.7vw, 38px); }
.property-facts { padding-top: 20px; }

.paths { grid-template-columns: 1.35fr .65fr; gap: 1px; background: var(--coast-line); }
.paths > div { min-height: 360px; padding-block: 54px; }
.path-sale { background: var(--coast-deep); }
.path-rent { background: var(--coast-mist); }
.paths h2 { max-width: 600px; font-size: clamp(39px, 4.2vw, 59px); text-transform: uppercase; }

.neighbourhoods { background: linear-gradient(180deg, var(--coast-mist), #fff); }
.route-layout { grid-template-columns: 1fr; gap: 46px; }
.route-map { min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0; }
.route-line { top: auto; right: 0; bottom: -16px; left: 0; width: auto; height: 2px; }
.route-line::after { transform: scaleX(var(--route-scale, .333333)); transform-origin: left; }
.route-stop {
  grid-template-columns: 48px 1fr;
  margin: 0;
  border: 1px solid var(--coast-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.route-stop b { width: 48px; height: 58px; border: 0; border-right: 1px solid var(--coast-line); background: #fff; }
.route-stop span { padding: 14px 16px; border: 0; font-size: 24px; }
.route-stop.is-active b { transform: none; border-color: var(--brand); }
.route-copy { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: end; }
.route-copy > div { margin: 0; padding: 22px 0 0; border: 0; border-top: 2px solid var(--brand-2); }

.viewing-process { padding: 82px 0; background: var(--coast-deep); }
.process-head { grid-template-columns: .85fr 1.15fr; }
.process-steps { gap: 12px; margin: 45px 0 38px; border: 0; }
.process-steps li,
.process-steps li + li {
  min-height: 185px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
}
.process-steps h3 { margin-top: 40px; }

.agent-layout { grid-template-columns: 1fr 360px; gap: 44px 70px; }
.agent-card { border-radius: 18px; background: var(--coast-sand); }
.agent-monogram { border-radius: 999px 999px 12px 12px; background: var(--coast-deep); }
.agent-layout blockquote { padding: 30px 6% 0 34%; font-size: clamp(28px, 3.5vw, 44px); }

.contact-strip {
  padding-block: 38px;
  background: #fff;
  color: var(--coast-ink);
  border-block: 1px solid var(--coast-line);
}
.contact-strip .ledger-index { color: var(--brand-text); }
.closing {
  min-height: 245px;
  grid-template-columns: 68px 1fr auto;
  background: var(--coast-sand);
}
.closing-number { border-radius: 999px; aspect-ratio: 1; align-self: center; }
.closing h2 { font-size: clamp(38px, 4.2vw, 56px); text-transform: uppercase; }

.site-footer { background: #fff; border-top: 1px solid var(--coast-line); }
.footer-grid { grid-template-columns: 1.35fr repeat(3, .7fr); gap: 48px; padding: 62px 0 42px; }
.footer-bottom { border-color: var(--coast-line); }

/* Subpages retain the same information architecture with a calmer catalogue. */
.page-intro { min-height: 285px; grid-template-columns: .82fr 1.18fr; gap: 70px; }
.page-intro h1 { font-size: clamp(48px, 5.2vw, 72px); text-transform: uppercase; }
.catalogue-tools { background: var(--coast-mist); border-color: var(--coast-line); }
.catalogue-section .property-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-hero { min-height: 690px; grid-template-columns: 1fr; position: relative; }
.detail-hero figure { min-height: 690px; }
.detail-summary {
  position: absolute;
  right: clamp(24px, 5vw, 76px);
  bottom: 36px;
  width: min(520px, calc(100% - 48px));
  padding: 34px 38px;
  border-radius: 20px;
  background: rgba(8,43,56,.92);
  backdrop-filter: blur(12px);
}
.detail-summary h1 { font-size: clamp(38px, 4vw, 56px); text-transform: uppercase; }
.detail-ledger { grid-template-columns: .9fr .9fr 1.2fr; }

.booking-page { grid-template-columns: 1fr; background: var(--coast-mist); }
.booking-intro {
  padding-block: 56px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  background: var(--coast-deep);
}
.booking-intro h1 { font-size: clamp(43px, 4.8vw, 67px); text-transform: uppercase; }
.booking-intro ol { margin: 0; align-self: end; }
.booking-panel { padding-block: 65px; }
.booking-panel form,
.booking-success { width: min(760px, 100%); padding: 34px; border: 1px solid var(--coast-line); border-radius: 20px; background: #fff; }
.booking-panel input,
.booking-panel select,
.booking-panel textarea { border-radius: 10px; border-color: var(--coast-line); }

.agency-story { background: var(--coast-mist); }
.agency-story-grid { grid-template-columns: .82fr 1.18fr; }
.agency-principles { gap: 1px; background: var(--coast-line); }
.agency-principles article { min-height: 270px; background: #fff; border: 0; }
.agency-principles h3 { margin-top: 56px; }
.contact-page { min-height: 620px; grid-template-columns: 1.25fr .75fr; }
.contact-copy { padding-block: 72px; }
.contact-card { margin: 34px; border-radius: 22px; background: var(--coast-deep); }
.policy-page article { grid-template-columns: 52px .62fr 1.38fr; }

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-ledger { display: grid; }
  .property-list,
  .catalogue-section .property-list { grid-template-columns: 1fr 1fr; }
  .route-copy { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .booking-intro { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --header: 68px; }
  .wrap,
  .footer-grid,
  .footer-bottom,
  .detail-breadcrumb,
  .detail-ledger,
  .page-intro { width: min(100% - 30px, var(--max)); }
  .header-inner { width: calc(100% - 30px); }
  .hero { min-height: 650px; }
  .hero-grid { width: calc(100% - 30px); min-height: 650px; padding: 46px 0 212px; }
  .hero h1 { font-size: clamp(43px, 13vw, 59px); line-height: .92; }
  .hero-copy > p:not(.route-stamp) { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .hero-ledger { bottom: 18px; grid-template-columns: 1fr; }
  .hero-ledger > p { display: none; }
  .hero-ledger li { grid-template-columns: 20px 1fr; padding: 9px 10px; }
  .hero-ledger small { font-size: 11px; }
  .search-dock { margin-top: -18px; }
  .property-finder { border-radius: 14px; }
  .section { padding: 68px 0; }
  .section-heading,
  .section-heading > div,
  .process-head { grid-template-columns: 1fr; gap: 18px; }
  .section-heading h2,
  .process-head h2,
  .route-copy h2,
  .agent-statement h2,
  .agency-story h2 { font-size: clamp(36px, 11vw, 49px); }
  .property-list,
  .catalogue-section .property-list { grid-template-columns: 1fr; }
  .property-photo { aspect-ratio: 16 / 10; }
  .property-copy { min-height: 245px; padding: 24px 21px; }
  .paths { grid-template-columns: 1fr; }
  .paths > div { min-height: 320px; }
  .route-map { grid-template-columns: 1fr; }
  .route-line { display: none; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li,
  .process-steps li + li { min-height: 0; }
  .agent-layout { grid-template-columns: 1fr; }
  .agent-layout blockquote { padding-left: 0; }
  .contact-strip { grid-template-columns: 1fr; }
  .closing { grid-template-columns: 48px 1fr; padding: 42px 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-intro { grid-template-columns: 1fr; min-height: 300px; }
  .page-intro h1 { font-size: clamp(43px, 13vw, 60px); }
  .detail-hero,
  .detail-hero figure { min-height: 650px; }
  .detail-ledger { grid-template-columns: 1fr; }
  .detail-ledger aside { grid-column: auto; }
  .detail-summary { right: 15px; bottom: 15px; width: calc(100% - 30px); padding: 26px 22px; }
  .detail-summary h1 { font-size: clamp(36px, 11vw, 50px); }
  .booking-intro { padding: 48px 20px; }
  .booking-panel { padding: 35px 15px; }
  .booking-panel form,
  .booking-success { padding: 25px 20px; }
  .agency-principles { grid-template-columns: 1fr; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-card { margin: 0 15px 30px; }
  .policy-page article { grid-template-columns: 36px 1fr; }
}

/* A split editorial hero keeps Coastline visibly distinct from Property Ledger. */
.hero { min-height: 620px; background: var(--white); color: var(--ink); }
.hero-photo { left: 52%; width: 48%; object-position: center; }
.hero-filter {
  inset: 0 0 0 52%;
  background: linear-gradient(180deg, rgba(5,35,48,.08), rgba(5,35,48,.58));
}
.hero-grid {
  min-height: 620px;
  grid-template-columns: 46% 54%;
  padding: 72px 0 104px;
}
.hero-copy { grid-column: 1; padding-right: clamp(32px, 5vw, 72px); }
.hero .route-stamp { color: var(--brand-text); }
.hero-copy > p:not(.route-stamp) { color: var(--ink-soft); }
.hero-actions .text-link { color: var(--ink); }
.hero-ledger { left: 52%; right: 22px; bottom: 22px; }
.search-dock { margin-top: 0; padding-block: 24px; background: var(--coast-mist); }

/* Keep the empty status node completely outside the visual surface. */
.toast:not(.is-visible) { opacity: 0; pointer-events: none; }
.toast.is-visible { opacity: 1; }

@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: 280px; }
  .hero-photo { inset: 0 0 auto; width: 100%; height: 280px; }
  .hero-filter { inset: 0 0 auto; height: 280px; }
  .hero-grid { min-height: 0; grid-template-columns: 1fr; padding: 42px 0 196px; }
  .hero-copy { grid-column: 1; padding-right: 0; }
  .hero-ledger { right: 15px; bottom: 16px; left: 15px; }
  .search-dock { margin-top: 0; padding-block: 18px; }
}
/* Mobile interaction floor: preserve the composition while keeping controls usable. */
.menu-toggle,
.property-finder button,
.property-finder select,
.property-finder fieldset label span { touch-action: manipulation; }

@media (max-width: 820px) {
  .menu-toggle { min-width: 44px; min-height: 44px; }
  .property-finder select,
  .property-finder button { min-height: 48px; }
  .property-finder fieldset label span {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* Listing cards: the viewing link is a full tap target on a phone. */
@media (max-width: 820px) {
  .property-facts a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* >>> colours and phone 2026-09-26 */
/* A section label takes its band's own ink: light on the deep sale band
   (it was dark on dark), dark on the pale ones (2026-09-26 colour pass). */
.ledger-index { color: inherit; }
/* The property's summary card on its photograph: the business's deep
   shade (it kept the design's teal), so its price reads in the light accent. */
.detail-summary { background: var(--brand-deep, rgba(8,43,56,.92)); }
/* The viewing request in the phone menu (the header's button is hidden there). */
.site-menu .menu-book { display: none; }
@media (max-width: 1040px) {
  .site-menu .menu-book { display: block; margin-top: 12px; padding: 13px 16px; border: 0; border-radius: 999px; background: var(--brand); color: var(--brand-on); font-weight: 700; text-align: center; }
}
/* The hero's three towns on a phone: names only (the lines under them were
   squeezed into three thin columns). */
@media (max-width: 760px) {
  .hero-ledger small { display: none; }
}
/* A heading keeps its last word company ("?" alone on a line). */
.contact-strip h2 { text-wrap: balance; }
/* The viewing request first in the open phone menu, in sight without
   scrolling past every page. */
@media (max-width: 1040px) {
  .site-menu .menu-book { order: -1; margin-top: 0; margin-bottom: 12px; }
}
/* Wide screens (2026-09-26: "most hero images are cropped"): the
   photograph's focus in its upper part, and the hero growing with the width,
   so a roof or a face is not cut away at the top. */
html:root body section[data-section="hero"] > .hero-photo,
html:root body section[data-section="hero"] :is(.hero-garden,.hero-visual,.exchange-hero__visual,.atlas-map-plane,.atlas-map-photo) img { object-position: center 30%; }
@media (min-width: 1440px) {
  html:root body section[data-section="hero"] { min-height: max(clamp(560px, 82vh, 800px), 40vw); }
}
/* The sale and rent halves on a wide screen: the outer side keeps the page
   margin, the inner side a normal gap (the words were one per line at 1920,
   and the page ran wider than the screen). */
@media (min-width: 761px) {
  .paths > .path-sale { padding-right: clamp(32px, 4vw, 72px); }
  .paths > .path-rent { padding-left: clamp(32px, 4vw, 72px); }
}
/* <<< colours and phone 2026-09-26 */

/* >>> standard 2026-09-25 */
/* The finished sites' standard (goal 2026-09-25): sections at most 68px a
   side (40px on a phone), the engines' bands a little tighter, no panel held
   taller than its words, the engine pages opening like the About page. */
:root body .section,:root body .viewing-process{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body .section.eng-sec{padding-top:clamp(36px,4vw,52px);padding-bottom:clamp(36px,4vw,52px)}
:root body .paths > div{min-height:0;padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body .closing{min-height:0}
:root body :is(.section,.viewing-process) > :first-child{margin-top:0}
:root body :is(.section,.viewing-process) > :last-child{margin-bottom:0}
:root body .eng-sec .eng-head{margin-top:0}
@media(max-width:760px){:root body :is(.section,.viewing-process){padding-top:40px;padding-bottom:40px}:root body .paths > div{padding-top:40px;padding-bottom:40px}}
:root body :is(.section h2,.section-head h2){max-width:none}
:root body .eng-page-intro{min-height:0;padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(28px,4vw,48px)}
/* The editors: every photograph keeps its frame inside the editor's wrapper. */
:root body :is(figure,.eng-card__photo) > [data-paurtal-img-wrap]{display:block !important;width:100%;height:100%}

/* The hero: the photograph across the whole width, the words on it in white
   over a dark fade from their side (the bottom on a phone, the left on a
   computer); no split, no frame, no drawn panel beside it. The five hero
   layouts of the family: the ledger set (img.hero-photo + .hero-grid),
   Canopy (.hero-stone + figure.hero-garden), Exchange (.exchange-hero__copy
   + .exchange-hero__visual), Gallery (.hero-copy + figure.hero-visual) and
   Atlas (.atlas-hero-copy + .atlas-map-plane). */
:root body section[data-section="hero"]{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;grid-template-rows:none;align-items:end;align-content:end;width:100%;max-width:none;min-height:max(480px,calc(100svh - 250px));margin:0;padding:0;background:#141a19;border:0;border-radius:0;box-shadow:none;overflow:hidden;gap:0;color:#fff}
:root body section[data-section="hero"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;display:block;width:auto;height:auto;border:0;border-radius:0;transform:none;opacity:1;background:linear-gradient(0deg,rgba(12,16,15,.92) 0%,rgba(12,16,15,.78) 45%,rgba(12,16,15,.5) 80%,rgba(12,16,15,.4) 100%)}
:root body section[data-section="hero"]::after{display:none}
:root body section[data-section="hero"] > :is(.hero-photo,.hero-garden,.hero-visual,.exchange-hero__visual,.atlas-map-plane){position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;min-height:0;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;clip-path:none;-webkit-mask:none;mask:none;transform:none;opacity:1;overflow:hidden;grid-area:auto;background:none}
:root body section[data-section="hero"] > .hero-photo{object-fit:cover;object-position:center 45%}
:root body section[data-section="hero"] :is(.hero-garden,.hero-visual,.exchange-hero__visual,.atlas-map-plane,.atlas-map-photo) img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:center 45%;border:0;border-radius:0;clip-path:none;transform:none;filter:none;box-shadow:none}
:root body section[data-section="hero"] .atlas-map-photo{position:absolute;inset:0;margin:0;border:0;border-radius:0;box-shadow:none;transform:none}
:root body section[data-section="hero"] :is(.hero-filter,.hero-note,.visual-grid,.quote-panel,figcaption){display:none}
:root body section[data-section="hero"] > :is(.hero-grid,.hero-stone,.hero-copy,.exchange-hero__copy,.atlas-hero-copy){position:relative;z-index:1;width:100%;max-width:none;min-height:0;margin:0;padding:28px 20px 32px;background:none;border:0;border-radius:0;box-shadow:none;clip-path:none;transform:none;grid-area:auto;color:#fff;pointer-events:none}
:root body section[data-section="hero"] > :is(.hero-grid,.hero-stone,.hero-copy,.exchange-hero__copy,.atlas-hero-copy) > *{pointer-events:auto}
:root body section[data-section="hero"] :is(h1,p,dt,dd,li,.route-stamp,.garden-kicker,.market-eyebrow,.atlas-coordinate,.hero-intro,.exchange-hero__intro){color:#fff}
:root body section[data-section="hero"] :is(.hero-copy,.hero-stone,.exchange-hero__copy,.atlas-hero-copy) h1{max-width:14ch;text-wrap:balance}
:root body section[data-section="hero"] :is(.hero-copy,.hero-stone,.exchange-hero__copy,.atlas-hero-copy) > p{max-width:46ch;color:#e6ebe8}
:root body section[data-section="hero"] .text-link,:root body section[data-section="hero"] .atlas-hero-actions > a:not(.btn){color:#fff;border-color:#fff}
:root body section[data-section="hero"] :is(.market-rail,.atlas-city-index,.hero-quiet-facts){border-color:rgba(255,255,255,.35)}
@media(min-width:900px){
  :root body section[data-section="hero"]{align-items:center;align-content:center;min-height:clamp(560px,82vh,800px)}
  :root body section[data-section="hero"]::before{background:linear-gradient(90deg,rgba(12,16,15,.9) 0%,rgba(12,16,15,.72) 38%,rgba(12,16,15,.2) 70%,rgba(12,16,15,0) 86%)}
  :root body section[data-section="hero"] > :is(.hero-stone,.hero-copy,.exchange-hero__copy,.atlas-hero-copy){padding:clamp(48px,8vh,96px) max(24px,calc((100% - 1240px) / 2))}
  :root body section[data-section="hero"] > :is(.hero-stone,.hero-copy,.exchange-hero__copy,.atlas-hero-copy) > *{max-width:620px}
  :root body section[data-section="hero"] > .hero-grid{width:min(1240px,calc(100% - 48px));margin-inline:auto;padding:clamp(48px,8vh,96px) 0}
}

/* The menu on one row beside the header's button, however many pages. */
@media(min-width:1025px){
  :root body .site-menu{flex-wrap:nowrap;gap:clamp(8px,.9vw,14px)}
  :root body .site-menu > a{flex-shrink:0;white-space:nowrap}
  :root body .site-menu:has(> a:nth-child(8)) > a{font-size:12.5px;letter-spacing:.02em}
  :root body .site-header :is(.header-cta,.header-book,.nav-cta){white-space:nowrap;flex-shrink:0}
}

/* The map in the contact strip: its own row across the strip, the address
   beside a real map, in the strip's own colours. */
:root body .contact-strip > .sb-location-map--embedded{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);align-items:center;width:100%;max-width:none;margin:8px 0 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:inherit}
:root body .contact-strip > .sb-location-map--embedded .sb-location-map__canvas{width:100%;height:340px;min-height:0;margin:0;border-radius:0;overflow:hidden;background:rgba(255,255,255,.12)}
:root body .contact-strip > .sb-location-map--embedded .sb-location-map__canvas :is(iframe,img){display:block;width:100%;height:100%;border:0}
:root body .contact-strip > .sb-location-map--embedded :is(h2,p,a){color:inherit}
@media(max-width:760px){:root body .contact-strip > .sb-location-map--embedded{grid-template-columns:1fr}:root body .contact-strip > .sb-location-map--embedded .sb-location-map__canvas{height:260px}}

/* A footer page list of seven or more: two columns. */
:root body .site-footer .footer-links > div:first-child:has(> a:nth-of-type(7)){display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:28px;align-content:start}
:root body .site-footer .footer-links > div:first-child:has(> a:nth-of-type(7)) > h2{grid-column:1/-1}

/* The hero's route card (Douala, Yaoundé, Buea) reads on the photograph: a
   dark see-through card with light words, whatever the design's own card. */
:root body section[data-section="hero"] .hero-ledger{background:rgba(12,16,15,.6);border:1px solid rgba(255,255,255,.22);box-shadow:none;color:#fff;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
:root body section[data-section="hero"] .hero-ledger :is(p,li,span,small,strong,b){color:#fff}
:root body section[data-section="hero"] .hero-ledger li{border-color:rgba(255,255,255,.2)}
:root body section[data-section="hero"] :is(.hero-garden,.hero-stone,.hero-visual,.exchange-hero__visual,.atlas-map-plane)::before,
:root body section[data-section="hero"] :is(.hero-garden,.hero-stone,.hero-visual,.exchange-hero__visual,.atlas-map-plane)::after{display:none}

/* No drawn lines: the route line joining the three towns goes, in every design. */
:root body .route-line{display:none}

/* A tap beside the hero's words reaches the photograph (the editors open its
   picker): the words' empty box lets the tap through, the words do not. */
:root body section[data-section="hero"] > .hero-grid > .hero-copy{pointer-events:none}
:root body section[data-section="hero"] > .hero-grid > .hero-copy > *{pointer-events:auto}
/* <<< standard 2026-09-25 */

/* >>> hero strip on phones 2026-11-02 */
/* Phones and tablets (Tumi 2026-11-02, JOZIMO): the strip pinned to the
   bottom of the hero covered the buttons, because the full-width hero took
   away the room it was pinned into. It now sits under the words, in one
   column, its rows lined up. The computer layout keeps it beside the words. */
@media (max-width:1040px){
  :root body section[data-section="hero"] > .hero-grid{grid-template-columns:minmax(0,1fr)}
  :root body section[data-section="hero"] .hero-ledger{position:relative;inset:auto;width:100%;min-width:0;max-width:100%;margin:28px 0 0}
  :root body section[data-section="hero"] .hero-ledger li{grid-template-columns:24px 1fr}
}
@media (max-width:760px){
  :root body section[data-section="hero"] .hero-ledger ol{grid-template-columns:1fr}
  :root body section[data-section="hero"] .hero-ledger li{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  :root body section[data-section="hero"] .hero-ledger li:last-child{border-bottom:0}
}
/* <<< hero strip on phones 2026-11-02 */
/* >>> hero strip on computers 2026-11-02 */
/* Computers: the title on its own row above the three items, so the third
   is not pushed past the hero's edge (it was cut off at 1280px). */
@media (min-width:1041px){
  :root body section[data-section="hero"] .hero-ledger{grid-template-columns:1fr}
  :root body section[data-section="hero"] .hero-ledger > p{border-right:0;border-bottom:1px solid rgba(255,255,255,.22);padding:10px 16px}
  :root body section[data-section="hero"] .hero-ledger ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root body section[data-section="hero"] .hero-ledger li{min-width:0}
}
/* Phones: the last row lined up with the others (it kept the wider padding). */
@media (max-width:760px){
  :root body section[data-section="hero"] .hero-ledger li{padding:9px 10px}
}
/* <<< hero strip on computers 2026-11-02 */