/*
  Marina Llorca, casas en la Costa Blanca
  Harmony: analogous, warm yellow-orange to yellow-green (about 42 to 75 deg): saffron, sand and olive,
  taken from the photo shoot's yellow armchairs, limestone floors and the olive and palm greens around white villas.
  60  --lime   #F5F1E6  page background (dominant, limewash white)
  30  --olive  #2F3818  text, header on scroll, footer, dark bands | --moss #5A6140 secondary text | --sage #C9CFAE text on olive
      --sand   #E9DFC6  secondary surfaces (search bar, cards, form)
  10  --saffron #E3A518 buttons and highlights (olive text on it)   | --ochre #8A5A00 saffron-family text on light
  Contrast (WCAG): olive on lime 10.95, moss on lime 5.78, lime on olive 10.95, olive on saffron 5.68,
  saffron on olive 5.68, olive on sand 9.32, ochre on lime 5.25, sage on olive 7.66, moss on sand 4.92.
*/
:root {
  --lime: #F5F1E6;
  --sand: #E9DFC6;
  --olive: #2F3818;
  --moss: #5A6140;
  --sage: #C9CFAE;
  --saffron: #E3A518;
  --ochre: #8A5A00;
  --rule: #D6CCB0;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Onest", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 80px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--lime); color: var(--olive); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--olive); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1; letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.hidden { display: none; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--olive); color: var(--lime); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* header */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 32px; padding: 16px var(--pad); background: var(--lime); border-bottom: 1px solid var(--rule); }
.top--over { position: fixed; inset: 0 0 auto; background: transparent; border-color: transparent; color: var(--lime); transition: background .3s, color .3s, border-color .3s; }
.top--over.is-solid { background: var(--lime); color: var(--olive); border-color: var(--rule); }
.brand { margin-right: auto; display: grid; text-decoration: none; color: inherit; line-height: 1; }
.brand b { font: 400 30px/1 var(--serif); }
.brand span { font-size: 13px; letter-spacing: .02em; margin-top: 4px; opacity: .85; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: inherit; text-decoration: none; font-weight: 500; font-size: 16px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: currentColor; }
.nav a[aria-current="page"] { border-color: var(--saffron); }
.nav .nav__cta { background: var(--saffron); color: var(--olive); padding: 12px 18px; border-radius: 4px; border: 0; font-weight: 600; }
.nav .nav__cta:hover { background: var(--olive); color: var(--lime); }
.menu-btn { display: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 4px; border: 1.5px solid transparent; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn--sun { background: var(--saffron); color: var(--olive); }
.btn--sun:hover { background: var(--olive); color: var(--lime); }
.btn--olive { background: var(--olive); color: var(--lime); }
.btn--olive:hover { background: var(--saffron); color: var(--olive); }
.btn--line { border-color: var(--olive); color: var(--olive); background: transparent; }
.btn--line:hover { background: var(--olive); color: var(--lime); }

/* home hero */
.hero { position: relative; min-height: max(92svh, 680px); display: flex; flex-direction: column; justify-content: flex-end; color: var(--lime); isolation: isolate; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31,37,14,.55) 0%, rgba(31,37,14,0) 24%), linear-gradient(0deg, rgba(31,37,14,.85) 0%, rgba(31,37,14,.55) 32%, rgba(31,37,14,0) 62%), linear-gradient(90deg, rgba(31,37,14,.55) 0%, rgba(31,37,14,0) 55%); }
.hero__text { padding: 0 var(--pad) 36px; max-width: 1100px; }
.hero__text p { font-size: 19px; max-width: 48ch; margin: 18px 0 0; }
.hero h1 { font-size: clamp(56px, 8vw, 124px); line-height: .92; }
.search { margin: 0 var(--pad) -48px; background: var(--sand); color: var(--olive); border-radius: 6px; padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14px; align-items: end; box-shadow: 0 24px 50px -24px rgba(47, 56, 24, .5); position: relative; z-index: 2; }
.search label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.search select { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--rule); border-radius: 4px; background: var(--lime); font: 500 16px/1 var(--sans); color: var(--olive); }
.search .btn { min-width: 180px; }

/* sections */
.sec { padding: clamp(80px, 10vw, 130px) var(--pad); }
.sec--first { padding-top: clamp(110px, 12vw, 160px); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(44px, 5.4vw, 80px); max-width: 14ch; }
.sec-head p { margin: 0; max-width: 44ch; color: var(--moss); }

/* property cards */
.props { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.prop { position: relative; }
.prop a { text-decoration: none; color: inherit; display: block; }
.prop__img { position: relative; overflow: hidden; border-radius: 6px; }
.prop__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.prop a:hover img { transform: scale(1.04); }
.prop__tag { position: absolute; left: 14px; top: 14px; background: var(--lime); color: var(--olive); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 3px; }
.prop__tag--sold { background: var(--olive); color: var(--lime); }
.prop__price { position: absolute; right: 14px; bottom: 14px; background: var(--saffron); color: var(--olive); font: 400 26px/1 var(--serif); padding: 10px 14px 8px; border-radius: 3px; }
.prop h3 { font-size: 30px; margin: 18px 0 6px; }
.prop__zone { margin: 0 0 12px; color: var(--moss); font-size: 15px; }
.prop__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rule); font-size: 15px; font-weight: 500; }
.prop__facts span { display: inline-flex; align-items: center; gap: 6px; }
.prop__facts svg { width: 18px; height: 18px; fill: none; stroke: var(--ochre); stroke-width: 1.8; }
.props__more { margin-top: 44px; }

/* about marina */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--olive); color: var(--lime); }
.about img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; }
.about__text { padding: clamp(56px, 7vw, 100px) var(--pad); }
.about h2 { font-size: clamp(40px, 4.6vw, 68px); margin-bottom: 22px; }
.about p { color: var(--sage); max-width: 52ch; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 34px; padding: 0; list-style: none; }
.stats li { border-top: 1px solid rgba(201, 207, 174, .4); padding-top: 12px; color: var(--sage); font-size: 15px; }
.stats b { display: block; font: 400 48px/1 var(--serif); color: var(--saffron); }

/* zones strip */
.zones { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--rule); }
.zones a { padding: 26px 18px 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; display: grid; gap: 4px; }
.zones a + a { padding-left: 18px; border-left: 1px solid var(--rule); }
.zones b { font: 400 34px/1 var(--serif); }
.zones span { font-size: 14px; color: var(--moss); }
.zones a:hover b { color: var(--ochre); }

/* sell band */
.sell { margin: 0 var(--pad) clamp(80px, 10vw, 130px); background: var(--sand); border-radius: 6px; display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; }
.sell__text { padding: clamp(36px, 5vw, 72px); }
.sell h2 { font-size: clamp(38px, 4.4vw, 64px); margin-bottom: 16px; }
.sell p { color: var(--moss); max-width: 46ch; margin: 0 0 26px; }
.sell img { width: 100%; height: 100%; object-fit: cover; }

/* inner page head */
.phead { padding: clamp(48px, 6vw, 84px) var(--pad) clamp(28px, 3vw, 40px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 60px; align-items: end; }
.phead h1 { font-size: clamp(56px, 8vw, 120px); line-height: .92; }
.phead p { color: var(--moss); margin: 0; max-width: 46ch; font-size: 18px; }

/* filters */
.filters { position: sticky; top: 77px; z-index: 20; margin: 0 var(--pad); background: var(--sand); border-radius: 6px; padding: 18px; display: grid; grid-template-columns: auto 1fr 1.3fr auto; gap: 18px 26px; align-items: end; }
.filters__group { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.filters__group > span, .filters legend { font-size: 14px; font-weight: 600; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label input { position: absolute; opacity: 0; }
.seg label span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 4px; border: 1.5px solid var(--rule); background: var(--lime); font-weight: 500; cursor: pointer; }
.seg label input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--lime); }
.seg label input:focus-visible + span { outline: 3px solid var(--saffron); outline-offset: 2px; }
.filters select { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 4px; border: 1.5px solid var(--rule); background: var(--lime); font: 500 16px/1 var(--sans); color: var(--olive); }
.range { display: grid; gap: 6px; }
.range output { font: 400 26px/1 var(--serif); }
.range input { width: 100%; accent-color: var(--olive); height: 26px; }
.count { margin: 0; text-align: right; font-size: 15px; color: var(--moss); }
.count b { display: block; font: 400 44px/1 var(--serif); color: var(--olive); }
.results { padding: 44px var(--pad) clamp(80px, 10vw, 120px); }
.empty { padding: 60px 0; text-align: center; color: var(--moss); }
.empty b { display: block; font: 400 40px/1.1 var(--serif); color: var(--olive); margin-bottom: 10px; }

/* valuation */
.val { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); padding: 0 var(--pad) clamp(80px, 10vw, 120px); align-items: start; }
.val__form { display: grid; gap: 26px; }
.val fieldset { border: 0; margin: 0; padding: 0; }
.val legend, .val .lbl { font: 400 30px/1.1 var(--serif); margin-bottom: 14px; padding: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields select, .fields textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 4px; border: 1.5px solid var(--rule); background: #FFFDF7; font: 400 16px/1.4 var(--sans); color: var(--olive); }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: none; border-color: var(--olive); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label input { position: absolute; opacity: 0; }
.checks label span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 4px; border: 1.5px solid var(--rule); background: #FFFDF7; cursor: pointer; font-weight: 500; }
.checks label span::before { content: ""; width: 16px; height: 16px; border: 1.5px solid var(--moss); border-radius: 3px; }
.checks input:checked + span { border-color: var(--olive); background: var(--sand); }
.checks input:checked + span::before { background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3 3 7-7' fill='none' stroke='%23F5F1E6' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--olive); }
.checks input:focus-visible + span { outline: 3px solid var(--saffron); outline-offset: 2px; }
.estimate { position: sticky; top: 100px; background: var(--olive); color: var(--lime); border-radius: 6px; padding: clamp(28px, 3.5vw, 44px); }
.estimate h2 { font-size: 34px; }
.estimate .estimate__range { font: 400 clamp(46px, 5vw, 70px)/1 var(--serif); color: var(--saffron); margin: 20px 0 8px; }
.estimate .estimate__per { color: var(--sage); margin: 0 0 22px; font-size: 16px; }
.estimate__bar { height: 10px; border-radius: 5px; background: rgba(201, 207, 174, .25); position: relative; margin-bottom: 8px; }
.estimate__bar i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--saffron); transition: left .4s, width .4s; }
.estimate__scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--sage); margin-bottom: 24px; }
.estimate p { color: var(--sage); font-size: 15px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; font-size: 15px; color: var(--sage); }
.steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--saffron); color: var(--saffron); display: grid; place-items: center; font: 400 18px/1 var(--serif); }
.steps b { color: var(--lime); font-weight: 600; }
.ok { margin: 0; padding: 16px 18px; border-radius: 4px; background: var(--olive); color: var(--lime); }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); padding: 0 var(--pad) clamp(80px, 10vw, 120px); }
.coast { background: var(--sand); border-radius: 6px; padding: 24px; }
.coast svg { width: 100%; height: auto; display: block; }
.coast .sea { fill: #C9CFAE; }
.coast .land { fill: var(--lime); stroke: var(--moss); stroke-width: 1.2; }
.coast .pin circle { fill: var(--saffron); stroke: var(--olive); stroke-width: 2; }
.coast .pin--office circle { fill: var(--olive); }
.coast text { font: 500 13px var(--sans); fill: var(--olive); }
.coast text.sea-label { font: italic 400 22px var(--serif); fill: var(--moss); }
.office { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.office h3 { font-size: 26px; margin-bottom: 6px; }
.office p { margin: 0; color: var(--moss); font-size: 16px; }
.office a { font-weight: 600; }
.cform { display: grid; gap: 16px; background: var(--sand); border-radius: 6px; padding: clamp(24px, 3.5vw, 44px); align-self: start; }
.cform h2 { font-size: 40px; }

/* footer */
.foot { background: var(--olive); color: var(--sage); padding: 60px var(--pad) 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
.foot b.foot__name { display: block; font: 400 44px/1 var(--serif); color: var(--lime); font-weight: 400; margin-bottom: 12px; }
.foot h3 { font: 600 15px/1.2 var(--sans); color: var(--lime); margin-bottom: 10px; }
.foot p { margin: 0 0 8px; }
.foot a { color: var(--lime); }
.foot__credit { grid-column: 1 / -1; border-top: 1px solid rgba(201, 207, 174, .3); padding-top: 22px; font-size: 14px; }

@media (max-width: 1100px) {
  .props { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr 1fr; position: static; }
  .count { text-align: left; }
  .zones { grid-template-columns: repeat(3, 1fr); }
  .zones a:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 880px) {
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 4px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 600 15px/1 var(--sans); cursor: pointer; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--lime); color: var(--olive); padding: 8px var(--pad) 22px; border-bottom: 1px solid var(--rule); display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--rule); }
  .nav .nav__cta { margin-top: 14px; text-align: center; }
  .search { grid-template-columns: 1fr 1fr; margin-bottom: -120px; }
  .search .btn { grid-column: 1 / -1; }
  .sec--first { padding-top: 170px; }
  .about, .sell, .val, .contact, .phead { grid-template-columns: 1fr; }
  .about img { min-height: 0; aspect-ratio: 4 / 3; }
  .sell img { aspect-ratio: 16 / 9; }
  .estimate { position: static; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .props { grid-template-columns: 1fr; }
  .search { grid-template-columns: 1fr; margin-bottom: -250px; }
  .sec--first { padding-top: 300px; }
  .hero { min-height: 640px; }
  .hero::before { background: linear-gradient(180deg, rgba(31,37,14,.5) 0%, rgba(31,37,14,.3) 30%, rgba(31,37,14,.8) 62%, rgba(31,37,14,.9) 100%); }
  .hero__text { padding-bottom: 28px; }
  .filters { grid-template-columns: 1fr; }
  .fields, .office { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .stats b { font-size: 38px; }
  .zones { grid-template-columns: 1fr 1fr; }
  .zones a:nth-child(odd) { border-left: 0; padding-left: 0; }
  .zones a:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}