/* Reference alignment upgrade: typography, spacing, property search, guide pages.
   Layered over the existing styles so Supabase and auction logic stay untouched. */
:root{--page-edge:clamp(18px,4.3vw,80px);--reference-navy:#00363f;--reference-teal:#14a998;--reference-yellow:#ffb20b}
.container{max-width:1230px}
body{font-kerning:normal;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.035em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #02aeaa;outline-offset:3px}
/* The two-bar masthead closely follows the white / dark-teal original. */
.utility-bar{background:#003440;min-height:34px}
.utility-inner{gap:25px}
.utility-inner a,.utility-inner button{font-size:11px;letter-spacing:.005em}
.main-header{height:76px;box-shadow:0 1px 0 #e4eeeb}
.header-inner{gap:22px}
.primary-nav{gap:27px}
.primary-nav a{font-weight:750;font-size:12px}
.logo{font-size:33px;font-weight:850;letter-spacing:-.085em}
.logo .sold{color:#50c7b4}
.header-actions .btn{border-radius:25px;min-height:41px}
/* Dense teal hero, visible green crescent and compact location search. */
.home-dark{background:#00363e}
.hero{min-height:335px;padding-top:69px}
.hero-copy{max-width:995px;margin:0 auto;text-align:center}
.hero h1{max-width:1000px;font-size:clamp(40px,4.4vw,61px);line-height:1.12;letter-spacing:-.044em;margin:0 auto 21px}
.hero p{max-width:760px;margin:0 auto;line-height:1.65;font-size:16.5px}
.home-dark:before{width:720px;height:725px;top:-316px;left:calc(50% - 1170px);background:linear-gradient(138deg,#b7eab6 2%,#6bd4c5 96%);opacity:1}
.home-dark:after{width:490px;height:490px;top:-320px;right:-295px;background:#096168;opacity:.64}
.reference-search{min-height:76px;border-radius:9px;padding:8px 9px 8px 21px;box-shadow:0 8px 24px rgba(0,34,40,.22);grid-template-columns:minmax(0,1fr) 162px 154px}
.reference-search .search-field{padding:7px 15px 6px 2px;justify-content:center;min-width:0}
.reference-search .search-field label{font-size:10px;letter-spacing:.045em}
.reference-search .search-field input{font-size:13px;min-height:25px}
.reference-search .reference-filter-trigger{margin:2px 7px 2px 0;min-height:52px;font-size:12px;font-weight:750;display:flex;gap:10px;justify-content:center;border-color:#dbeae7;border-radius:7px}
.reference-search .search-submit{min-height:52px;margin:2px 0 2px 3px;border-radius:7px;font-size:13px}
.home-intros.home-reference-tiles{gap:15px;padding-top:0;margin-top:27px}
.home-intros.home-reference-tiles .intro-card{min-height:210px;padding:25px 23px 21px;border-radius:7px;box-shadow:0 8px 20px rgba(0,19,23,.07)}
.home-intros.home-reference-tiles .intro-card h3{margin-bottom:13px;font-size:18px}
.home-intros.home-reference-tiles .intro-card p{font-size:12.5px;line-height:1.6}
.home-intros.home-reference-tiles .btn{padding:10px 17px;min-height:38px;font-size:11px}
.home-dark{padding-bottom:67px}
/* Slim dividers make stats read as one cohesive horizontal band. */
.stats-section{padding:64px 0 65px}
.stats-grid .stat{position:relative;padding:4px 12px}
.stats-grid .stat:not(:last-child):after{content:'';position:absolute;height:83px;right:-2px;top:50%;transform:translateY(-50%);width:1px;background:#dceae7}
.stat-number{font-size:clamp(45px,5vw,65px);color:#008e83;font-weight:850;letter-spacing:-.05em}
.stat-label{font-weight:700;font-size:13px;max-width:225px;margin:auto;line-height:1.5}
/* Search and property cards: closer metadata hierarchy & stronger starting bid emphasis. */
.properties-section{background:#f5f9f7}
.properties-section .section-heading h2,.latest-properties-intro h2{font-size:33px}
.property-card{border:1px solid #e0ebe8;border-radius:9px;box-shadow:0 5px 19px rgba(0,42,43,.06)}
.property-picture{height:235px}
.status-label{font-size:10px;border-radius:4px;background:#003941;padding:8px 12px;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.status-days{display:inline-block;min-width:17px;text-align:center}
.property-meta span{background:#e7f6f1;color:#0b645e;font-size:10px;font-weight:750;padding:6px 8px}
.property-content{padding:20px 19px 13px}
.property-content h3{font-size:19px;font-weight:800;margin-bottom:10px}
.property-location{font-size:12.5px;line-height:1.55;min-height:43px}
.property-brief{color:#52686c;font-size:11px;gap:12px;padding-top:13px}
.property-bottom{padding:16px 19px 19px;align-items:end}
.property-bottom .btn{border-radius:21px;min-height:39px;padding:11px 13px}
.bid-value{font-size:24px;font-weight:850}
.bid-label{font-size:11px;color:#567276}
.card-time-left{font-size:10px;color:#526f72;display:flex;align-items:center;gap:5px;white-space:nowrap;margin-top:8px}
.card-time-left strong{color:#07525b}
/* Property search results resembles original stacked filter / results template. */
.page-hero{padding:63px 0 70px;background:#00363e}
.page-hero h1{font-size:clamp(39px,4.2vw,55px);line-height:1.18}
.page-hero p{line-height:1.65}
.results-search{margin-top:-38px;margin-bottom:30px}
.listing-results-section{padding-top:46px}
.latest-properties-intro{margin-bottom:42px}
.latest-properties-intro p{font-size:15px;line-height:1.65;max-width:850px}
.results-title-row{padding-bottom:27px}
.results-title-row h2{font-size:29px}
.results-side-panel{border-radius:9px}
.side-title h2{font-size:21px}
.side-filter-group{padding-top:19px;padding-bottom:19px}
.side-filter-option{font-size:12px}
/* Reference-style information page benefits and numbered processes. */
.reference-benefits{padding-block:75px}
.reference-benefits .benefit-card{border-radius:8px}
.split-section{gap:64px}
.split-content h2{font-size:clamp(31px,3.3vw,45px);line-height:1.17}
.split-content p{font-size:15px;line-height:1.8}
.split-img{border-radius:12px}
.steps{gap:15px}
.step-card{border-radius:9px;box-shadow:0 8px 23px rgba(2,52,58,.045)}
.step-number{font-size:43px;line-height:1.05;letter-spacing:-.055em}
.reference-quicklinks{padding:56px 0;background:#f5faf8}
.reference-quicklinks h2{font-size:30px;margin:0 0 27px}
.reference-quicklinks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.reference-quicklinks-grid a{background:#fff;border:1px solid #d7e7e3;padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:750;border-radius:9px}
.reference-quicklinks-grid a:hover{border-color:#15b59b;background:#f6fffc}
/* Gallery and legal document column */
.details-heading h1{font-size:clamp(28px,3vw,40px)}
.gallery{gap:9px;border-radius:11px}
.gallery-photo .gallery-open{border:0;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 3px 12px #00344027}
.gallery-photo .gallery-open:hover{background:#d7f9ee}
.property-gallery-modal h2{padding-right:30px}
.gallery-modal-grid{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:repeat(2,155px);gap:8px;overflow:hidden;border-radius:10px;margin:21px 0}
.gallery-modal-grid img{width:100%;height:100%;object-fit:cover}
.gallery-modal-grid img:first-child{grid-row:1/3}
.detail-sidebar{border-radius:10px;box-shadow:0 10px 28px rgba(0,41,45,.10)}
/* Mobile reference style */
@media(max-width:1150px){.primary-nav{gap:17px}.header-inner{gap:15px}.reference-search{grid-template-columns:minmax(0,1fr) 149px 134px}}
@media(max-width:900px){.main-header{height:73px}.hero{min-height:305px;padding-top:57px}.hero h1{font-size:clamp(37px,5.5vw,51px)}.home-intros.home-reference-tiles{gap:13px}.home-intros.home-reference-tiles .intro-card{min-height:180px}.reference-search{grid-template-columns:minmax(0,1fr) 145px 125px}.reference-quicklinks-grid{grid-template-columns:1fr}}
@media(max-width:740px){
 .main-header{height:68px}.hero{padding-top:35px;min-height:278px}.hero h1{font-size:clamp(32px,8vw,43px);line-height:1.18;margin-bottom:17px}.hero p{font-size:14px;line-height:1.62}
 .home-dark:before{width:430px;height:510px;top:-180px;left:-343px}.home-dark:after{width:270px;height:270px;top:-145px;right:-168px}
 .reference-search{grid-template-columns:minmax(0,1fr) 1fr;gap:8px;padding:10px;min-height:0}
 .reference-search .search-field{grid-column:1/-1;border:1px solid #e1ebe9;border-radius:7px;padding:9px 12px}
 .reference-search .reference-filter-trigger,.reference-search .search-submit{grid-column:auto;min-width:0;margin:0;min-height:44px;white-space:nowrap}
 .home-intros.home-reference-tiles{grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}
 .home-intros.home-reference-tiles .intro-card{padding:18px 15px 16px;min-height:175px}
 .home-intros.home-reference-tiles .intro-card h3{font-size:16px;line-height:1.2;margin-bottom:9px}
 .home-intros.home-reference-tiles .intro-card p{font-size:11.5px;margin-bottom:15px;line-height:1.5}
 .home-intros.home-reference-tiles .intro-card .btn{font-size:10px;padding:9px 12px}
 .home-dark{padding-bottom:33px}.stats-section{padding:35px 0}.stats-grid .stat:not(:last-child):after{height:55px}
 .property-picture{height:208px}.property-content{padding:17px}.property-bottom{padding:15px 17px 18px}
 .page-hero{padding:48px 0 63px}.page-hero h1{font-size:clamp(33px,8vw,43px)}.reference-quicklinks{padding:37px 0}
 .gallery-modal-grid{grid-template-rows:repeat(2,125px)}
}
@media(max-width:480px){
 .home-intros.home-reference-tiles{grid-template-columns:1fr 1fr!important}
 .home-intros.home-reference-tiles .intro-card{min-height:190px}
 .home-intros.home-reference-tiles .intro-card h3{font-size:15px}
 .home-intros.home-reference-tiles .intro-card p{font-size:11px}
 .hero h1{font-size:clamp(30px,8.4vw,36px)}
 .hero p{font-size:13.5px}
 .bid-value{font-size:23px}
 .property-bottom .btn{padding:10px 12px}
 .reference-filter-trigger{font-size:11px}
}
@media(max-width:355px){.home-intros.home-reference-tiles{grid-template-columns:1fr!important}.home-intros.home-reference-tiles .intro-card{min-height:0}}
/* Final screenshot QA adjustments: left-anchored search and legible one-column mobile intro. */
.reference-search .search-field{align-items:flex-start;text-align:left}
.reference-search .search-field label{width:100%;justify-content:flex-start}
.reference-search .search-field input{width:100%;text-align:left}
@media(max-width:600px){
  .home-intros.home-reference-tiles{grid-template-columns:1fr!important}
  .home-intros.home-reference-tiles .intro-card{min-height:0!important;padding:22px 21px!important}
  .home-intros.home-reference-tiles .intro-card h3{font-size:18px!important}
  .home-intros.home-reference-tiles .intro-card p{font-size:13px!important;margin-bottom:17px}
  .home-dark:before{left:-375px;top:-230px;opacity:.82}
  .hero h1{font-size:clamp(32px,8.3vw,40px)}
  .reference-search .search-field{align-items:flex-start!important}
}
.reference-search .search-field{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important}
.reference-search .search-field label{margin:0 0 5px!important;width:auto}
.reference-search .search-field input{align-self:stretch!important;min-width:0!important}
/* Edge-cropped property/lifestyle photo on the original dark hero */
.hero-decoration{right:-91px!important;top:0!important;width:374px!important;height:350px!important;transform:none!important;border:0!important;clip-path:ellipse(51% 66% at 80% 27%);opacity:.25!important;overflow:hidden;z-index:0}
.hero-decoration img{width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.12);transform:none}
.hero-decoration-ring{position:absolute;inset:0;box-shadow:inset 0 0 0 26px #33bcb0;opacity:.34;border-radius:100%}
@media(max-width:800px){.hero-decoration{display:none!important}}