@charset "UTF-8";
/*!
 * West Auckland Property Management
 * Copyright D3V Services Limited.
 *
 * 1. Fonts
 * 2. Tokens
 * 3. Reset and base
 * 4. Layout primitives
 * 5. Buttons
 * 6. Header and navigation
 * 7. Home
 * 8. About
 * 9. Landlords
 * 10. Tenants
 * 11. News
 * 12. Contact
 * 13. Prose and policy pages
 * 14. Footer
 * 15. Motion layer
 * 16. Responsive
 */

/* ------------------------------------------------------------------ *
 * 1. Fonts
 * ------------------------------------------------------------------ */

@font-face {
    font-family: "Museo Sans";
    src: url("../fonts/MuseoSans-300.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Museo Sans";
    src: url("../fonts/MuseoSans-500.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Museo Sans";
    src: url("../fonts/MuseoSans-700.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ *
 * 2. Tokens
 * ------------------------------------------------------------------ */

:root {
    --ink: #143555;
    --ink-60: rgba(20, 53, 85, .6);
    --blue: #1e9cd8;
    --blue-30: rgba(30, 156, 216, .3);
    --blue-pale: #d2ebf7;
    --green: #81bc41;
    --green-30: rgba(129, 188, 65, .3);
    --green-dark: #00581e;
    --green-light-30: rgba(156, 216, 30, .3);
    --yellow: #f9ed25;
    --grey: #4a5464;
    --grey-light: #728197;
    --off-white: #fbfbfb;
    --white: #fff;

    --radius: 10px;
    --radius-sm: 5px;

    --container: 1380px;
    --container-sm: 1280px;
    --gutter: 30px;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

    --reveal-delay: 0s;
    --reveal-duration: .75s;

    --header-h: 120px;
}

/* ------------------------------------------------------------------ *
 * 3. Reset and base
 * ------------------------------------------------------------------ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    /* clip, not hidden, so position: sticky still works inside. */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: "Museo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.625;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    line-height: 1.25;
}

p {
    margin: 0;
    line-height: 1.625;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 2px;
}

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

ul, ol {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

hr {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .2;
    margin: 0;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 3000;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--white);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 500;
    transition: top .25s var(--ease-out);
}

.skip-link:focus {
    top: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Layout primitives
 * ------------------------------------------------------------------ */

.container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container-sm {
    max-width: var(--container-sm);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 3;
}

.container-fluid.p-0 {
    padding: 0;
}

.section {
    padding: 4rem 0;
}

.position-relative {
    position: relative;
}

.bg-green {
    color: var(--white);
    background-color: var(--green);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.row > [class^="col"] {
    padding: 0 15px;
}

.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }

.grid {
    display: grid;
    gap: 30px;
}

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

/* Section heading scale, matching the original fluid type ramp. */

.section-heading h1 {
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(40px, 2.5vw + 22px, 50px);
}

.section-heading h2 {
    font-weight: 500;
    line-height: 1.35;
    font-size: clamp(30px, 2.2vw + 13px, 40px);
}

.section-heading h2.green {
    color: var(--green);
}

.section-heading h3 {
    font-weight: 500;
    line-height: 1.35;
    font-size: clamp(26px, 1.3vw + 17px, 32px);
}

.section-heading p {
    line-height: 1.6;
    font-weight: 300;
    font-size: clamp(16px, .5vw + 14px, 18px);
}

.section-heading h1 + p,
.section-heading h2 + p {
    margin-top: 16px;
}

.section-heading p + p {
    margin-top: 10px;
}

.section-heading p + a,
.section-heading p + .btn {
    margin-top: 30px;
}

/* Two text links side by side, e.g. "Owner Information" and the guide. */
.section-heading .btn-link + .btn-link {
    margin-left: 26px;
}

/* ------------------------------------------------------------------ *
 * 5. Buttons
 * ------------------------------------------------------------------ */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    padding: 11px 24px;
    cursor: pointer;
    /* Labels are all short. Wrapping one mid-phrase looks broken, and the
       header CTA did exactly that at tablet widths. */
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                transform .35s var(--ease-spring), box-shadow .3s ease;
    will-change: transform;
}

.btn-sm {
    padding: 11px 24px;
    font-size: 18px;
}

.btn-xl {
    padding: 14px 30px;
    font-size: 20px;
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(20, 53, 85, .55);
}

.btn-secondary,
.btn-secondary:focus {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--green-dark);
}

.btn-secondary:hover,
.btn-secondary:active {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(0, 88, 30, .5);
}

.btn-link,
.btn-link:focus {
    background-color: transparent;
    border-color: transparent;
    color: var(--blue);
    padding-left: 0;
    padding-right: 0;
}

.btn-link:hover {
    color: var(--ink);
}

.btn-outline {
    border-color: currentColor;
    color: var(--ink);
}

.btn-outline:hover {
    background: var(--ink);
    color: var(--white);
    transform: translateY(-2px);
}

/* Arrow icons keep the original nudge-on-hover behaviour. */

.arrow,
.arrow-blue,
.arrow-green {
    display: inline-block;
    width: 18px;
    height: 12px;
    margin-left: 14px;
    flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateX(-5px);
    transition: transform .45s var(--ease-out);
}

.arrow { background-image: url("../img/arrow-white.svg"); width: 20px; height: 14px; }
.arrow-blue { background-image: url("../img/arrow-blue.svg"); }
.arrow-green { background-image: url("../img/arrow-green.svg"); }

.btn:hover .arrow,
.btn:hover .arrow-blue,
.btn:hover .arrow-green,
.btn:focus-visible .arrow,
.btn:focus-visible .arrow-blue,
.btn:focus-visible .arrow-green {
    transform: translateX(6px);
}

/* ------------------------------------------------------------------ *
 * 6. Header and navigation
 * ------------------------------------------------------------------ */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2019;
    transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out),
                transform .4s var(--ease-out);
}

/* Sticky, condensed header once the page has scrolled. */
.site-header.is-stuck {
    position: fixed;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 8px 30px -18px rgba(20, 53, 85, .55);
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.navbar {
    display: flex;
    align-items: center;
    min-height: var(--header-h);
    transition: min-height .4s var(--ease-out);
}

.site-header.is-stuck .navbar {
    min-height: 84px;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.navbar-brand {
    position: relative;
    z-index: 3;
    display: block;
    margin-right: auto;
    line-height: 0;
    transition: transform .4s var(--ease-out);
}

.navbar-brand img {
    width: 150px;
    height: auto;
    transition: width .4s var(--ease-out);
}

.site-header.is-stuck .navbar-brand img {
    width: 120px;
}

.navbar-brand .logo-white {
    display: none;
}

.navbar-menu {
    display: block;
    flex-grow: 1;
    margin-left: 3rem;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-nav .nav-item {
    margin-left: 30px;
}

.navbar-nav .nav-item:first-child {
    margin-left: 0;
}

.navbar-nav .nav-link {
    position: relative;
    display: inline-block;
    color: var(--ink);
    font-weight: 500;
    font-size: 18px;
    padding: 4px 0;
}

/* Underline that grows from the left, and sits filled for the active page. */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease-out);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--blue);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-menu-toggler {
    display: none;
    position: relative;
    z-index: 3;
    /* 26px of bars inside a 44px tap target. */
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0 9px;
    margin-left: 1rem;
    color: var(--ink);
}

.navbar-menu-toggler > span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .35s var(--ease-out), opacity .2s ease;
}

.navbar-menu-toggler > span + span {
    margin-top: 5px;
}

/* ------------------------------------------------------------------ *
 * 7. Home
 * ------------------------------------------------------------------ */

#section-home {
    padding: 240px 0 6rem;
}

#section-home .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Fixed widths are a target, not a floor: these panels shrink together
   between the mobile breakpoint and the max container width. */
#section-home .hero-content-text {
    width: 530px;
    min-width: 0;
}

#section-home .hero-content-text h1 {
    color: var(--blue);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 17px;
    font-size: clamp(40px, 2.5vw + 22px, 50px);
}

#section-home .hero-content-text span {
    display: block;
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 15px;
    color: var(--ink);
    font-weight: 700;
}

#section-home .hero-content-text p {
    line-height: 1.55;
    font-weight: 300;
    width: 465px;
    max-width: 100%;
    margin-bottom: 30px;
    font-size: clamp(16px, 1vw + 12px, 20px);
}

#section-home .hero-content-media {
    width: 740px;
    min-width: 0;
}

#section-home .hero-content-media img {
    width: 100%;
    height: auto;
}

/* Soft brand wash behind the hero. */
#section-home::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    max-width: 900px;
    max-height: 900px;
    background: radial-gradient(circle at center, rgba(30, 156, 216, .10), transparent 62%);
    pointer-events: none;
    z-index: 0;
}

.know-property {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.know-property .media {
    width: 715px;
    min-width: 0;
}

.know-property .media img {
    width: 100%;
    height: auto;
}

.know-property .content {
    width: 530px;
    min-width: 0;
}

.know-property .content p {
    max-width: 517px;
}

.section-our-dif .difference {
    position: relative;
    width: 100%;
    min-height: 640px;
}

.section-our-dif .difference > img {
    width: 100%;
    height: 640px;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Sits over the white side of the artwork, so it keeps the body ink colour. */
.section-our-dif .difference .section-heading {
    width: 460px;
    position: absolute;
    bottom: 40px;
    right: 40px;
}

.section-our-dif .difference .section-heading .icon {
    margin-bottom: 30px;
    width: 140px;
}

.talk {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 60px 120px;
}

.talk .section-heading {
    position: relative;
    z-index: 2;
    width: 496px;
    max-width: 100%;
    margin-left: 50%;
}

.talk-decor::before {
    position: absolute;
    content: "";
    background: url("../img/bg-decor.svg") no-repeat top -32rem left -18rem;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .9;
}

.section-testimonials .container {
    width: 100%;
    min-height: 500px;
}

.section-testimonials .container > img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--radius);
}

.section-testimonials .testimonials {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    position: absolute;
    top: 50px;
    left: 80px;
    right: 80px;
}

.section-testimonials .testimonials .section-heading {
    color: var(--white);
    min-width: 0;
}

/* Only the heading sits on the blue side of the artwork. The quotes sit on
   the white side, so they keep the body ink colour. */
.section-testimonials .testimonials .slider {
    flex: 0 1 596px;
    min-width: 0;
}

.section-testimonials .slide .icon {
    width: 60px;
    height: 60px;
}

.section-testimonials .slide .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section-testimonials .slide .content {
    margin: 30px 0;
}

.section-testimonials .slide .content p {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
}

.section-testimonials .slide .author p {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 300;
    display: flex;
    align-items: center;
}

.section-testimonials .slide .author p > span {
    font-weight: 500;
    margin-left: 4px;
}

/* Google sourced reviews carry their five stars; site testimonials do not. */
.slide-stars {
    display: inline-flex;
    gap: 2px;
    margin-left: 10px;
    color: #f5a623;
    vertical-align: middle;
}

.slide-stars svg {
    width: 14px;
    height: 14px;
}

.section-testimonials .slide .author p::before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    border-right: 4px solid var(--blue);
    height: 25px;
}

/* Slider mechanics */

.slider {
    position: relative;
}

.slider-viewport {
    position: relative;
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform .6s var(--ease-out);
}

.slide {
    flex: 0 0 100%;
    min-width: 0;
    padding-right: 2px;
    opacity: .25;
    transition: opacity .5s ease;
}

.slide.is-active {
    opacity: 1;
}

.slider-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding: 0;
    list-style: none;
}

.slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    transition: opacity .3s ease, width .35s var(--ease-out);
}

.slider-dots button[aria-current="true"] {
    opacity: 1;
    width: 28px;
    border-radius: 5px;
}

/* ------------------------------------------------------------------ *
 * 8. About
 * ------------------------------------------------------------------ */

#section-page {
    padding: 220px 0 6rem;
}

/* flow-root contains the floated image without clipping. The old
   overflow:hidden did both, so any copy taller than the image got cut
   off at the bottom. */
.hero-about {
    display: flow-root;
}

.hero-about .media-about {
    float: right;
    width: 854px;
    max-width: 100%;
}

.hero-about .section-heading {
    position: absolute;
    top: 20%;
    width: 630px;
    max-width: 100%;
}

.hero-about .section-heading h1 {
    color: var(--blue);
}

.hero-about .section-heading p {
    line-height: 1.55;
    font-size: clamp(18px, .8vw + 14px, 20px);
}

.history {
    display: flow-root;
}

.history .media-history {
    width: 787px;
    max-width: 100%;
}

.history .section-heading {
    position: absolute;
    top: 25%;
    right: 30px;
    width: 605px;
    max-width: 100%;
}

.history .section-heading span {
    display: block;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    margin: 20px 0;
}

.team-members {
    margin-top: 40px;
    /* Every card the same height, across rows as well as within them. */
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* As soon as a profile is expanded, cards size to their own content instead,
   so opening one does not stretch its neighbours into tall empty boxes. */
.team-members:has(.member-more[open]) {
    align-items: start;
    grid-auto-rows: auto;
}

.team-members .team-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}

.team-members .team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -30px rgba(20, 53, 85, .45);
}

/* Themes cycle green and blue down the grid, set per member in the data. */
.team-members .team-card-green {
    background-color: var(--green-light-30);
    color: var(--green-dark);
}

.team-members .team-card-blue {
    background-color: var(--blue-30);
}

.team-members .team-card::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.team-members .team-card-green::before {
    background: url("../img/member-decor-1.svg") no-repeat bottom -10rem right -3rem;
}

.team-members .team-card-blue::before {
    background: url("../img/member-decor-2.svg") no-repeat bottom -10rem right -3rem;
}

.team-members .team-card .member-img {
    position: relative;
    z-index: 2;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex: none;
}

.team-members .team-card .member-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .7s var(--ease-out);
}

.team-members .team-card:hover .member-img img {
    transform: scale(1.04);
}

.team-members .team-card .member-info {
    position: relative;
    z-index: 2;
    padding: 26px 26px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.team-members .team-card .member-info h3 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 6px;
}

.member-roles {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.member-roles li {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    opacity: .8;
}

.member-intro {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 300;
}

/* Expandable profile. Native <details>, so it works with no JavaScript. */
.member-more {
    margin-top: 14px;
}

.member-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    /* 44px minimum touch target. */
    min-height: 44px;
    padding: 4px 0;
    color: inherit;
}

.member-more > summary::-webkit-details-marker {
    display: none;
}

.member-more-label {
    position: relative;
}

.member-more-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease-out);
}

.member-more > summary:hover .member-more-label::after,
.member-more > summary:focus-visible .member-more-label::after {
    transform: scaleX(1);
}

.member-more-icon {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .35s var(--ease-out);
}

.member-more[open] .member-more-icon {
    transform: translateY(1px) rotate(-135deg);
}

.member-more[open] .member-more-label {
    /* Swap the affordance once it is open. */
    font-size: 0;
}

.member-more[open] .member-more-label::before {
    content: "Show less";
    font-size: 15px;
}

.member-more-body {
    padding-top: 12px;
}

.member-more-body p {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 300;
}

.member-more-body p + p {
    margin-top: 10px;
}

.member-quote {
    margin: 16px 0 0;
    padding-left: 16px;
    border-left: 3px solid currentColor;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
    font-style: italic;
    opacity: .95;
}

/* Animate the disclosure where the browser supports it; instant elsewhere. */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    .member-more-body {
        height: 0;
        overflow: hidden;
        transition: height .4s var(--ease-out), opacity .3s ease;
        opacity: 0;
    }

    .member-more[open] .member-more-body {
        height: auto;
        opacity: 1;
    }
}

.team-members .team-card .member-info .buttons {
    margin-top: auto;
    padding-top: 22px;
}

.team-members .team-card .member-info .button {
    display: flex;
    align-items: center;
}

.team-members .team-card .member-info .button + .button {
    margin-top: 10px;
}

.team-members .team-card .member-info .button .icon {
    margin-right: 10px;
    flex: none;
    display: flex;
}

.team-members .team-card .member-info .button .content {
    font-size: 16px;
    font-weight: 700;
    word-break: break-word;
}

.team-members .team-card .member-info .button .content a:hover {
    text-decoration: underline;
}

/* ---- About: values and communication channels ---- */

.values {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: start;
}

.channels {
    background: var(--blue-30);
    border-radius: var(--radius);
    padding: 34px 34px 30px;
}

.channels h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

.channels p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
    margin-top: 20px;
}

/* A plain list, not badges. */
.channel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.channel-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.channel-list li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

/* ------------------------------------------------------------------ *
 * 9. Landlords
 * ------------------------------------------------------------------ */

/* Contained, like every other inner page hero. The old site let this one
   bleed off the left edge and positioned the copy absolutely over it, which
   put it out of step with about, tenants and contact. */
.hero-landlords {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-landlords .land-media {
    width: 801px;
    min-width: 0;
}

.hero-landlords .section-heading {
    width: 627px;
    min-width: 0;
}

.hero-landlords .section-heading h1 {
    color: var(--blue);
    margin-bottom: 17px;
}

.hero-landlords .section-heading h2 {
    margin-bottom: 16px;
}

.hero-landlords .section-heading .btn {
    margin-top: 30px;
}

.hero-landlords .section-heading p {
    line-height: 1.55;
    font-size: clamp(16px, 1vw + 12px, 20px);
}

.best-tenants .section-heading {
    width: 734px;
    max-width: 100%;
}

.best-tenants .section-heading h2 {
    color: var(--green);
}

.best-tenants .wrapper {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 30px;
}

.best-tenants .tenant-feat {
    display: flex;
    gap: 14px;
    transition: transform .4s var(--ease-out);
}

.best-tenants .tenant-feat:hover {
    transform: translateX(4px);
}

.best-tenants .tenant-feat::before {
    content: "";
    flex: none;
    width: 4px;
    border-radius: 2px;
    background: var(--green);
    align-self: stretch;
    min-height: 54px;
}

.best-tenants .tenant-feat p {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
}

.best-tenants .wrapper .box5 {
    grid-column: 2 / 4;
}

.expert-adv {
    display: flow-root;
}

.expert-adv .media-adv {
    float: right;
    width: 753px;
    max-width: 100%;
}

.expert-adv .section-heading {
    position: absolute;
    width: 661px;
    max-width: 100%;
    top: 15%;
}

.expert-adv .section-heading h2 {
    color: var(--blue);
}

.standard {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    min-height: 468px;
    padding: 60px 70px;
    display: flex;
    align-items: flex-start;
}

.standard .section-heading {
    position: relative;
    z-index: 2;
    width: 683px;
    max-width: 100%;
    margin-left: auto;
}

.standard-decor::before {
    position: absolute;
    content: "";
    background: url("../img/standard.svg") no-repeat bottom -38rem left -32rem;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.flex-service {
    margin-top: 160px;
    display: flow-root;
}

.flex-service .section-heading {
    position: absolute;
    width: 814px;
    max-width: 100%;
    top: -18%;
}

.flex-service .section-heading h2 {
    color: var(--blue);
}

.flex-service .media-flex img {
    width: 100%;
    height: auto;
}

.free-property {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.free-property .section-heading {
    width: 518px;
    min-width: 0;
}

.free-property .section-heading h2 {
    color: var(--blue);
}

.free-property .media-flex {
    width: 690px;
    min-width: 0;
}

/* ------------------------------------------------------------------ *
 * 10. Tenants
 * ------------------------------------------------------------------ */

.hero-listings {
    margin-bottom: 140px;
    display: flow-root;
}

.hero-listings .media-listings {
    float: right;
    width: 100%;
}

.hero-listings .section-heading {
    position: absolute;
    bottom: -34%;
    right: 2%;
    width: 656px;
    max-width: 100%;
}

.hero-listings .section-heading h1 {
    color: var(--blue);
}

.hero-listings .section-heading p {
    line-height: 1.55;
    font-size: clamp(16px, 1vw + 12px, 20px);
}

.rent {
    display: flow-root;
    position: relative;
}

.rent .rent-media {
    width: 730px;
    height: 410px;
    float: right;
    max-width: 100%;
}

.rent .rent-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.rent .section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    gap: 40px;
}

.rent .section-content .section-heading {
    width: 472px;
    min-width: 0;
}

.rent .section-content .section-heading h2 {
    color: var(--green);
}

.requirements-list,
.references-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirements-list li + li,
.references-list li + li {
    margin-top: 30px;
}

.requirements-list li,
.references-list li {
    position: relative;
    line-height: 1.5;
    font-size: 20px;
    font-weight: 500;
    padding-left: 54px;
}

.requirements-list li::before,
.references-list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    background: url("../img/checkmark.svg") no-repeat 50%;
    background-size: contain;
}

.references-list li::before {
    background-image: url("../img/check.svg");
}

.rent .section-content .requirements-list {
    margin-right: 240px;
}

.section-references .section-heading {
    width: 507px;
    max-width: 100%;
}

.section-references .section-heading h2 {
    color: var(--blue);
}

.section-references .references {
    margin-top: 50px;
    display: flow-root;
    position: relative;
}

.section-references .references-media {
    width: 746px;
    max-width: 100%;
}

.section-references .references-list {
    position: absolute;
    top: 50%;
    right: 3%;
}

.section-references .references-list li {
    width: 500px;
    max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * 10b. Shared content blocks
 *
 * Used across landlords, tenants and about for the longer form copy.
 * ------------------------------------------------------------------ */

/* Copy on one side, supporting cards or a checklist on the other. */
.info-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.info-cards {
    display: grid;
    gap: 20px;
}

.info-card {
    background: var(--off-white);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    padding: 26px 28px;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -30px rgba(20, 53, 85, .45);
}

.info-card h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 10px;
}

.info-card p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
}

.prep-grid {
    margin-top: 50px;
}

.prep-grid .info-card:nth-child(even) {
    border-left-color: var(--green);
}

/* Numbered advice list. */
.tip-list {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: tip;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 50px;
}

.tip-list li {
    counter-increment: tip;
    position: relative;
    padding-left: 52px;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 300;
}

.tip-list li::before {
    content: counter(tip);
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-30);
    color: var(--green-dark);
    font-size: 16px;
    font-weight: 700;
}

/* Numbered steps. */
.step-grid {
    margin-top: 50px;
}

.step-card {
    position: relative;
    background: var(--blue-30);
    border-radius: var(--radius);
    padding: 30px 28px;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -30px rgba(20, 53, 85, .45);
}

.step-number {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
}

.step-card h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 10px;
}

.step-card p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
}

/* ---- Landlord guide (flipbook) ---- */

.guide-hero {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: center;
}

.eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 14px;
}

.guide-hero h1 {
    color: var(--blue);
}

.guide-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.guide-cover img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 30px 60px -30px rgba(20, 53, 85, .55);
    transition: transform .5s var(--ease-out);
}

.guide-cover:hover img {
    transform: translateY(-4px);
}

/* The viewer is a landscape spread of a portrait book, so 16:10 sits it
   nicely without letterboxing. */
.guide-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--blue-30);
    box-shadow: 0 30px 60px -34px rgba(20, 53, 85, .5);
}

.guide-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.guide-note {
    margin-top: 20px;
    font-size: 15px;
    color: var(--grey);
}

.guide-note a {
    color: var(--blue);
    font-weight: 500;
}

.guide-note a:hover {
    text-decoration: underline;
}

/* Promo card used on other pages to point at the guide. */
.guide-promo {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
    background: var(--off-white);
    border-radius: var(--radius);
    padding: 40px;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.guide-promo:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -32px rgba(20, 53, 85, .45);
}

.guide-promo-cover img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 34px -20px rgba(20, 53, 85, .5);
}

.guide-promo h2 {
    font-size: clamp(24px, 1.4vw + 18px, 30px);
    line-height: 1.3;
    margin-bottom: 12px;
}

.guide-promo p {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 300;
}

.guide-promo .btn {
    margin-top: 24px;
}

/* ---- Facebook feed ---- */

.facebook-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.fb-grid {
    margin-top: 50px;
}

.fb-card {
    background: var(--off-white);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.fb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -30px rgba(20, 53, 85, .45);
}

.fb-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fb-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex: none;
    background: var(--blue-30);
}

.fb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease-out);
}

.fb-card:hover .fb-image img {
    transform: scale(1.05);
}

.fb-body {
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.fb-date {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--grey-light);
    margin-bottom: 10px;
}

.fb-text {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
}

.fb-body .btn-link {
    margin-top: auto;
    padding-top: 20px;
    align-self: flex-start;
}

.fb-fallback {
    margin-top: 40px;
    background: var(--blue-30);
    border-radius: var(--radius);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.fb-fallback p {
    font-size: 18px;
    font-weight: 300;
    max-width: 640px;
}

/* ------------------------------------------------------------------ *
 * 11. News
 * ------------------------------------------------------------------ */

.blog-page .section-heading {
    margin-bottom: 50px;
    width: 656px;
    max-width: 100%;
}

.blog-page .section-heading h1 {
    color: var(--blue);
}

.blog-page .section-heading p {
    line-height: 1.55;
    font-size: clamp(16px, 1vw + 12px, 20px);
}

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card .blog-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-radius: var(--radius);
}

.blog-card .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    transition: transform .7s var(--ease-out);
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-card .blog-content {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card .blog-content h2,
.blog-card .blog-content h3 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 15px;
    margin-bottom: 7px;
    transition: color .25s ease;
}

.blog-card:hover .blog-content h2,
.blog-card:hover .blog-content h3 {
    color: var(--blue);
}

.blog-card .blog-content .btn {
    margin-top: auto;
    padding-top: 20px;
    align-self: flex-start;
}

.blog-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--grey-light);
}

.blog-info p {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cover-image {
    width: 100%;
    height: 494px;
    margin-bottom: 50px;
    overflow: hidden;
    border-radius: var(--radius);
}

.cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.blog-article-page {
    display: flex;
    gap: 50px;
}

.blog-article-page .share {
    margin-top: 65px;
    flex: none;
}

.blog-article-page .share h2 {
    font-size: 18px;
    line-height: 1.35;
    color: var(--ink-60);
    font-weight: 700;
    margin-bottom: 20px;
}

.share-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.share-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--blue-30);
    color: var(--ink);
    transition: transform .35s var(--ease-spring), background-color .25s ease, color .25s ease;
}

.share-list a:hover {
    background: var(--blue);
    color: var(--white);
    transform: translateY(-3px) scale(1.06);
}

.share-list svg {
    width: 18px;
    height: 18px;
}

.blog-article-page .blog-article {
    width: 1000px;
    max-width: 100%;
}

.blog-article-page .blog-article h1 {
    color: var(--blue);
}

.related-articles .section-heading {
    margin-bottom: 50px;
}

.related-articles .section-heading h2 {
    color: var(--blue);
}

/* ------------------------------------------------------------------ *
 * 12. Contact
 * ------------------------------------------------------------------ */

.hero-contact {
    display: flow-root;
    margin-top: 150px;
}

.hero-contact .section-heading {
    position: absolute;
    top: -22%;
    width: 647px;
    max-width: 100%;
}

.hero-contact .section-heading h1 {
    color: var(--blue);
}

.hero-contact .section-heading p {
    line-height: 1.55;
    font-size: clamp(16px, 1vw + 12px, 20px);
}

.hero-contact .media-contact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Copy on the left, the form in its own panel on the right.
 *
 * The original curved artwork was a fixed 1111x900 image with the form placed
 * over it. That only worked while the form was short: at this field count the
 * form outgrew the curve and the submit button ended up sitting off the blue.
 * A straight panel keeps the padding even at any height, and matches what the
 * tablet and mobile layouts already did. */
.get-in-touch {
    position: relative;
    display: grid;
    grid-template-columns: 377px 1fr;
    gap: 60px;
    align-items: start;
}

/* Line the heading up with the first field rather than the panel edge. */
.get-in-touch .section-heading {
    min-width: 0;
    padding-top: 50px;
}

.get-in-touch .section-heading h1,
.get-in-touch .section-heading h2 {
    color: var(--blue);
}

.form-panel {
    background: var(--blue-30);
    border-radius: var(--radius);
    padding: 50px 50px 40px;
    min-width: 0;
}

.form-contact {
    width: 100%;
}

.form-row {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -15px;
}

.form-group {
    margin-bottom: 40px;
    padding: 0 15px;
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
}

.form-group-half {
    flex: 0 0 50%;
    max-width: 50%;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    margin-bottom: 6px;
    color: var(--ink);
    opacity: .75;
    transition: opacity .25s ease, color .25s ease;
}

.form-group:focus-within label {
    opacity: 1;
    color: var(--blue);
}

/* Most fields are required, so the three that are not carry the marker. That
   is fewer marks than asterisking five, and nothing needs to shout in red. */
.form-group .opt {
    font-weight: 300;
    opacity: .7;
}

.form-contact input,
.form-contact select,
.form-contact textarea {
    font: inherit;
    color: var(--ink);
    height: 51px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: transparent;
    width: 100%;
    padding: 0;
    border-radius: 0;
    transition: border-color .3s ease;
}

.form-contact textarea {
    height: 115px;
    padding: 12px 0;
    resize: vertical;
}

.form-contact input::placeholder,
.form-contact textarea::placeholder {
    color: var(--ink);
    opacity: .55;
}

/* Animated focus underline over the static border. */
.form-group::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s var(--ease-out);
}

.form-group:focus-within::after {
    transform: scaleX(1);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.form-note {
    font-size: 14px;
    color: var(--grey);
}

.form-alert {
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 30px;
    font-weight: 500;
}

.form-alert-success {
    background: var(--green-30);
    color: var(--green-dark);
}

.form-alert-error {
    background: rgba(192, 57, 43, .12);
    color: #a5281b;
}

.form-alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
    font-weight: 300;
}

.honeypot {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-us {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.contact-us .contact-image {
    width: 917px;
    min-width: 0;
    max-width: 100%;
}

.contact-us .section-heading {
    width: 405px;
    min-width: 0;
}

.contact-us .section-heading h3 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.contact-list {
    margin: 30px 0;
    list-style: none;
    padding: 0;
}

.contact-list li + li {
    margin-top: 15px;
}

.contact-list li {
    line-height: 1.5;
    font-size: 18px;
    font-weight: 300;
}

.contact-list li .who {
    font-weight: 500;
}

/* Plain links on their own lines. The previous highlighted chips wrapped
   unpredictably and read as scattered tags. */
.contact-list li {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 4px 14px;
    align-items: baseline;
}

.contact-list li .who {
    font-weight: 500;
    grid-column: 1;
}

.contact-list li .role {
    grid-column: 2;
    opacity: .75;
    font-size: 16px;
}

.contact-list li .details {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.contact-list li a {
    position: relative;
    font-weight: 500;
    color: var(--green-dark);
}

.contact-list li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease-out);
}

.contact-list li a:hover::after {
    transform: scaleX(1);
}

/* ---- Enquiry viewer (staff only) ---- */

.viewer-gate {
    max-width: 520px;
}

.viewer-form {
    margin-top: 30px;
}

.viewer-form .form-group {
    padding: 0;
    margin-bottom: 26px;
}

.viewer-form input {
    font: inherit;
    width: 100%;
    height: 51px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: transparent;
    border-radius: 0;
}

.viewer-note {
    margin-top: 24px;
    font-size: 15px;
    color: var(--grey);
}

.viewer-note code {
    background: var(--blue-30);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 14px;
}

.viewer-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.enquiry-list {
    display: grid;
    gap: 20px;
}

.enquiry {
    background: var(--off-white);
    border-left: 4px solid var(--blue);
    border-radius: var(--radius);
    padding: 26px 28px;
}

.enquiry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.enquiry-head h2 {
    font-size: 20px;
    font-weight: 500;
}

.enquiry-head time {
    font-size: 13px;
    color: var(--grey-light);
}

.enquiry-fields {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 16px;
    margin: 0 0 18px;
    font-size: 16px;
}

.enquiry-fields dt {
    color: var(--grey);
}

.enquiry-fields dd {
    margin: 0;
    font-weight: 500;
    word-break: break-word;
}

.enquiry-fields dd a {
    color: var(--green-dark);
}

.enquiry-fields dd a:hover {
    text-decoration: underline;
}

.enquiry-message {
    padding: 16px 18px;
    background: var(--white);
    border-radius: var(--radius-sm);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: normal;
}

.enquiry-locked {
    font-size: 15px;
    color: var(--grey);
}

@media (max-width: 767px) {
    .enquiry-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .enquiry-fields dt { font-size: 13px; margin-top: 8px; }
    .enquiry { padding: 22px 20px; }
}

/* ------------------------------------------------------------------ *
 * 13. Prose and policy pages
 * ------------------------------------------------------------------ */

.prose {
    max-width: 860px;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 300;
}

.prose > * + * {
    margin-top: 1.1em;
}

.prose h2 {
    font-size: 30px;
    margin-top: 1.8em;
    color: var(--blue);
}

.prose h3 {
    font-size: 24px;
    margin-top: 1.6em;
    color: var(--ink);
}

.prose h4 {
    font-size: 20px;
    margin-top: 1.4em;
}

.prose strong {
    font-weight: 700;
}

.prose a {
    color: var(--blue);
    font-weight: 500;
}

.prose a:hover {
    text-decoration: underline;
}

.prose ul,
.prose ol {
    padding-left: 22px;
}

.prose li + li {
    margin-top: 10px;
}

.prose img {
    border-radius: var(--radius);
    width: 100%;
    height: auto;
    margin: 30px 0;
}

.prose figure {
    margin: 30px 0;
}

.prose blockquote {
    margin: 30px 0;
    padding-left: 24px;
    border-left: 4px solid var(--blue);
    font-size: 20px;
    font-weight: 500;
}

/* Reading progress bar on article pages. */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--blue), var(--green));
    z-index: 3000;
    pointer-events: none;
}

/* Empty state / 404 */

.state-page {
    padding: 220px 0 6rem;
    text-align: center;
}

.state-page h1 {
    color: var(--blue);
    font-size: clamp(48px, 6vw, 96px);
    font-weight: 700;
}

.state-page p {
    margin: 20px auto 32px;
    max-width: 560px;
    font-size: 18px;
}

.state-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ *
 * 14. Footer
 * ------------------------------------------------------------------ */

.footer {
    position: relative;
    margin-top: 40px;
    color: var(--white);
    background-color: var(--ink);
    padding: 50px 0;
}

.footer-row {
    margin-bottom: 3rem;
}

.footer-brand img {
    width: 160px;
    height: auto;
}

.footer-title {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 20px;
}

.footer-title-hidden {
    opacity: 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li + li {
    margin-top: 20px;
}

.footer-links li,
.footer p {
    font-weight: 300;
    line-height: 1.4;
    font-size: 18px;
}

.footer-links li a {
    position: relative;
    color: var(--white);
}

.footer-links li a::after,
.footer p a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease-out);
}

.footer-links li a:hover::after {
    transform: scaleX(1);
}

.footer p a {
    position: relative;
}

hr.footer-separator {
    border-top: 1px solid rgba(249, 237, 37, .2);
    opacity: 1;
}

.disclaimer {
    margin-top: 20px;
    display: flex;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.disclaimer p {
    font-size: 14px;
}

.credit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.credit-link {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    opacity: .85;
    transition: opacity .25s ease, transform .35s var(--ease-spring);
}

.credit-link img {
    width: auto;
    height: 13px;
    display: block;
}

.credit-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.disclaimer .links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
    flex-wrap: wrap;
}

.disclaimer .links a:hover {
    text-decoration: underline;
}

/* Back to top */

.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2500;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.85);
    transition: opacity .35s ease, transform .45s var(--ease-spring), visibility .35s;
}

.to-top svg {
    width: 20px;
    height: 20px;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.to-top:hover {
    background: var(--blue);
}

/* ------------------------------------------------------------------ *
 * 15. Motion layer
 *
 * Reveal on scroll. Elements only start hidden when JS is available, so
 * the page is fully readable without it.
 * ------------------------------------------------------------------ */

.js [data-reveal] {
    opacity: 0;
    transition:
        opacity var(--reveal-duration) var(--ease-out) var(--reveal-delay),
        transform var(--reveal-duration) var(--ease-out) var(--reveal-delay),
        filter var(--reveal-duration) var(--ease-out) var(--reveal-delay);
    will-change: opacity, transform;
}

.js [data-reveal="up"]    { transform: translate3d(0, 40px, 0); }
.js [data-reveal="left"]  { transform: translate3d(-48px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.94); filter: blur(6px); }
.js [data-reveal="fade"]  { transform: none; }

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Staggered nav entrance on first paint. */
.js .navbar-nav .nav-item {
    opacity: 0;
    transform: translateY(-10px);
    animation: nav-in .6s var(--ease-out) forwards;
    animation-delay: calc(.12s + var(--nav-i) * .05s);
}

@keyframes nav-in {
    to { opacity: 1; transform: none; }
}

/* Hero copy lifts in immediately, no observer needed. */
.js .hero-intro > * {
    opacity: 0;
    transform: translateY(24px);
    animation: hero-in .9s var(--ease-out) forwards;
}

.js .hero-intro > *:nth-child(1) { animation-delay: .10s; }
.js .hero-intro > *:nth-child(2) { animation-delay: .20s; }
.js .hero-intro > *:nth-child(3) { animation-delay: .30s; }
.js .hero-intro > *:nth-child(4) { animation-delay: .40s; }
.js .hero-intro > *:nth-child(5) { animation-delay: .50s; }

@keyframes hero-in {
    to { opacity: 1; transform: none; }
}

/* Media panels get a gentle parallax drift while in view. */
.js [data-parallax] {
    will-change: transform;
}

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .js .navbar-nav .nav-item,
    .js .hero-intro > * {
        opacity: 1;
        transform: none;
    }

    .js [data-parallax] {
        transform: none !important;
    }
}

/* ------------------------------------------------------------------ *
 * 16. Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1320px) {
    .get-in-touch { grid-template-columns: 340px 1fr; gap: 40px; }
    .hero-landlords .land-media { width: 600px; }
    .hero-listings .section-heading { width: 600px; bottom: -40%; }
}

@media (max-width: 1300px) {
    .hero-contact .section-heading { width: 600px; }
    .hero-about .section-heading { top: 10%; }
    .hero-about .media-about { width: 700px; }
}

@media (max-width: 1250px) {
    .contact-us .contact-image { width: 800px; }
    /* Stack: copy above, form panel below. */
    .get-in-touch {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .get-in-touch .section-heading { padding-top: 0; }
    .hero-contact { margin-top: 200px; }
    .hero-contact .section-heading { width: 500px; top: -33%; }
    .flex-service .section-heading { width: 700px; top: -30%; }
    .team-members .team-card .member-info { padding: 22px 22px 26px; }
    .history .media-history { width: 650px; }
}

@media (max-width: 1190px) {
    .section-references .references-list { top: 46%; }
    .section-references .references-list li { width: 400px; }
    .section-references .references-media { width: 600px; }
    .hero-listings { margin-bottom: 0; }
    .hero-listings .media-listings { margin-bottom: 40px; }
    .hero-listings .section-heading {
        position: relative;
        width: 100%;
        right: 0;
        bottom: 0;
    }
    .history .section-heading { top: 15%; width: 550px; }
    .history .media-history { width: 500px; }
    .hero-about .section-heading { top: 0; }
    .hero-about .media-about { width: 500px; }
    .section-testimonials .testimonials { top: 30px; left: 40px; right: 40px; gap: 40px; }
    .section-testimonials .testimonials .section-heading { width: 280px; }
    .section-testimonials .testimonials .slider { flex: 0 1 500px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
    .rent .section-content .section-heading { width: 400px; }
    .rent .section-content .requirements-list { margin-right: 200px; }
    .standard-decor::before { background-position: bottom -38rem left -40rem; }
    .expert-adv .media-adv { width: 600px; }
    .expert-adv .section-heading { width: 580px; top: 5%; }
    .best-tenants .wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .best-tenants .wrapper .box5 { grid-column: 1 / 3; }
    .section-our-dif .container .section-heading { right: 20px; }
    .talk .section-heading { margin-left: 40%; }
    .talk-decor::before { background-position: top -32rem left -26rem; }
}

@media (max-width: 1050px) {
    .hero-contact .section-heading { top: -40%; }
}

@media (max-width: 1000px) {
    :root { --header-h: 100px; }

    .contact-us { flex-direction: column-reverse; align-items: flex-start; }
    .contact-us .section-heading { width: 100%; margin-bottom: 40px; }
    .contact-us .contact-image { width: 100%; }

    .hero-contact { display: flex; flex-direction: column-reverse; margin-top: 0; }
    .hero-contact .section-heading {
        width: 100%;
        position: relative;
        margin-bottom: 40px;
        top: 0;
    }

    .cover-image { height: 300px; }
    .blog-page .section-heading,
    .section-references .section-heading { width: 100%; }

    .section-references .references { display: flex; flex-direction: column-reverse; }
    .section-references .references-list {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 40px;
    }
    .section-references .references-list li,
    .section-references .references-media { width: 100%; }

    .rent .section-content .section-heading { width: 340px; }
    .rent .section-content .requirements-list { margin-right: 90px; }

    .free-property { flex-direction: column-reverse; }
    .free-property .media-flex { width: 100%; }
    .free-property .section-heading { width: 100%; margin-bottom: 40px; }

    .flex-service { margin-top: 0; display: flex; flex-direction: column-reverse; }
    .flex-service .section-heading { position: relative; width: 100%; top: 0; margin-bottom: 40px; }

    .standard { min-height: auto; padding: 40px; }
    .standard .section-heading { width: 100%; margin-left: 0; }

    .expert-adv { display: flex; flex-direction: column-reverse; }
    .expert-adv .media-adv { width: 100%; float: none; }
    .expert-adv .section-heading { position: relative; width: 100%; top: 0; margin-bottom: 40px; }

    .hero-landlords {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 40px;
    }
    .hero-landlords .section-heading { width: 100%; }
    .hero-landlords .land-media { width: 100%; }

    .history { display: flex; flex-direction: column-reverse; }
    .history .section-heading {
        margin-bottom: 20px;
        right: 0;
        top: 0;
        position: relative;
        width: 100%;
    }
    .history .media-history { width: 100%; }

    .hero-about { display: flex; flex-direction: column-reverse; }
    .hero-about .section-heading { margin-bottom: 40px; width: 100%; position: relative; }
    .hero-about .media-about { float: none; width: 100%; }

    #section-home { padding: 160px 0 4rem; }
    #section-home .hero-content { flex-direction: column; align-items: flex-start; }
    #section-home .hero-content-text { width: 100%; }
    #section-home .hero-content-text p { width: 100%; }
    #section-home .hero-content-media { margin-top: 40px; width: 100%; }

    .know-property { flex-direction: column-reverse; }
    .know-property .media { width: 100%; margin: 20px 0; }
    .know-property .content,
    .know-property .content p { width: 100%; max-width: 100%; }

    /* Alternate rows keep the image below on mobile for a consistent rhythm. */
    .know-property.is-reversed { flex-direction: column-reverse; }

    .section-our-dif .difference { min-height: auto; }
    .section-our-dif .difference > img { height: 420px; }
    .section-our-dif .difference .section-heading {
        width: 100%;
        position: relative;
        right: 0;
        bottom: 0;
        margin-top: 30px;
    }
    .section-our-dif .difference .section-heading .icon { margin-top: 0; }

    .talk .section-heading { margin-left: 20%; }
    .talk-decor::before { background-position: top -12rem left -12rem; background-size: 50%; }

    .team-members .team-card .member-info { padding: 22px 20px 26px; }

    .values,
    .info-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }

    .guide-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .guide-cover { max-width: 320px; }
    .guide-promo { grid-template-columns: 160px 1fr; gap: 30px; padding: 30px; }
}

@media (max-width: 992px) {
    .section-testimonials .testimonials { gap: 30px; }
    .section-testimonials .testimonials .section-heading { width: 260px; }
    .footer-title { margin-top: 2rem; }
    .col-lg-2, .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 908px) {
    .navbar-nav .nav-link { font-size: 16px; }
    .navbar-nav .nav-item { margin-left: 16px; }
    .btn-sm { font-size: 16px; padding: 10px 16px; }
}

@media (max-width: 885px) {
    .section-testimonials .container { min-height: 0; }
    .section-testimonials .container > img { display: none; }
    .section-testimonials .testimonials {
        display: flex;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
    }
    .section-testimonials .testimonials .section-heading { color: var(--ink); width: auto; }
}

@media (max-width: 767px) {
    .section-testimonials .testimonials {
        flex-direction: column;
        gap: 0;
    }
    .section-testimonials .testimonials .section-heading { width: 100%; }
    .section-testimonials .testimonials .slider {
        flex: 1 1 auto;
        width: 100%;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    :root { --gutter: 20px; }

    .section { padding: 3rem 0; }
    #section-page { padding: 150px 0 4rem; }
    #section-home { padding: 140px 0 3rem; }

    .navbar-menu-toggler {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .navbar-menu {
        display: flex;
        position: fixed;
        inset: 0;
        height: 100dvh;
        flex-direction: column;
        justify-content: center;
        margin-left: 0;
        pointer-events: none;
    }

    .navbar-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        transform: scaleY(0);
        transform-origin: center top;
        transition: transform .6s var(--ease-out) .25s;
        background: var(--blue-pale);
    }

    .navbar-menu .navbar-nav {
        position: relative;
        z-index: 2;
        opacity: 0;
        transition: opacity .5s ease;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        padding: 0 15px;
        text-align: center;
    }

    .navbar-menu .navbar-nav .nav-item {
        margin: 0;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
        animation: none;
    }

    .navbar-menu .navbar-nav .nav-item + .nav-item {
        margin-top: 1rem;
    }

    .navbar-menu .navbar-nav .nav-link {
        font-size: 24px;
        color: var(--ink);
    }

    .navbar-menu .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-menu .nav-item-cta .btn {
        font-size: 22px;
        padding: 14px 32px;
        margin-top: .5rem;
    }

    /* Open state */
    .menu-is-open .navbar-menu { pointer-events: auto; }
    .menu-is-open .navbar-menu::before { transform: scaleY(1); transition-delay: 0s; }
    .menu-is-open .navbar-menu .navbar-nav { opacity: 1; transition-delay: .3s; }
    .menu-is-open .navbar-menu .navbar-nav .nav-item {
        opacity: 1;
        transform: none;
        transition-delay: calc(.35s + var(--nav-i) * .06s);
    }

    .menu-is-open { overflow: hidden; }
    .menu-is-open .navbar-menu-toggler > span:not(.sr-only):first-of-type {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-is-open .navbar-menu-toggler > span:not(.sr-only):nth-of-type(2) {
        opacity: 0;
    }
    .menu-is-open .navbar-menu-toggler > span:not(.sr-only):nth-of-type(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .arrow, .arrow-blue, .arrow-green { width: 16px; height: 12px; margin-left: 10px; }
    .btn-xl { font-size: 17px; padding: 12px 22px; }

    .form-panel { padding: 30px 20px 20px; }
    .form-group { margin-bottom: 30px; }
    .form-group-half { flex: 0 0 100%; max-width: 100%; }

    .blog-article-page { flex-direction: column; gap: 0; }
    .blog-article-page .blog-article { width: 100%; }
    .blog-article-page .share {
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 40px;
    }
    .blog-article-page .share h2 { margin-bottom: 0; }
    .share-list { flex-direction: row; }

    .rent { margin-top: 40px; }
    .rent .rent-media { height: 300px; float: none; width: 100%; }
    .rent .section-content {
        position: relative;
        bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 30px;
    }
    .rent .section-content .section-heading { width: 100%; margin-bottom: 30px; }
    .rent .section-content .requirements-list { margin-right: 0; }

    .standard { padding: 40px 20px; }
    .best-tenants .section-heading { width: 100%; }
    .best-tenants .wrapper { grid-template-columns: minmax(0, 1fr); }
    .best-tenants .wrapper .box5 { grid-column: 1 / 2; }

    .disclaimer { text-align: center; flex-direction: column; }
    .footer-title.footer-title-hidden { display: none; }
    .col-6, .col-lg-2, .col-lg-4 { flex: 0 0 100%; max-width: 100%; }

    .talk { padding: 60px 30px; }
    .talk .section-heading { margin-left: 0; }
    .talk-decor::before { display: none; }

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

    .cover-image { height: 220px; margin-bottom: 30px; }
    .to-top { right: 16px; bottom: 16px; }

    /* Single column: matching heights would just pad every card out. */
    .team-members { grid-auto-rows: auto; }

    .facebook-head { flex-direction: column; align-items: flex-start; }
    .fb-grid { margin-top: 30px; }
    .fb-fallback { padding: 26px 22px; }

    /* A 16:10 spread is unreadable on a phone, so give it more height. */
    .guide-frame { aspect-ratio: 3 / 4; }
    .guide-promo { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
    .guide-promo-cover { max-width: 180px; }

    .tip-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .prep-grid { margin-top: 30px; }
    .step-grid { margin-top: 30px; }
    .info-card { padding: 22px 20px; }
    .channels { padding: 26px 22px; }
}

@media (max-width: 550px) {
    .talk { padding: 30px 20px; }
    .talk .section-heading { width: 100%; }
    #section-home .hero-content-text span { font-size: 20px; }
    .section-our-dif .difference > img { height: 300px; }
}