/* Hollis Marlowe - Palm Beach. Fictional concept project. */
:root{
  --paper:#F6F1E7; --card:#FCFAF4; --ink:#16181B; --line:rgba(22,24,27,.9); --hair:rgba(22,24,27,.16);
  --signal:#C4502B; --signal-soft:#E8764F; --ok:#2E6B45;
  --mono:'IBM Plex Mono',monospace; --sans:'Archivo',sans-serif; --edit:'Newsreader',serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--signal);color:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1260px;margin:0 auto;padding:0 30px}
.mono{font-family:var(--mono)}
.micro{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* reveal */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(246,241,231,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 8px 24px rgba(22,24,27,.08)}
.head-in{display:flex;justify-content:space-between;align-items:center;padding:16px 0;transition:padding .3s var(--ease)}
header.site.scrolled .head-in{padding:10px 0}
.wordmark{font-weight:600;font-size:17px;letter-spacing:.02em;text-decoration:none}
.wordmark .pb{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(22,24,27,.55);margin-left:14px;text-transform:uppercase}
nav.main{display:flex;align-items:center}
nav.main a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;margin-left:26px;position:relative;padding-bottom:2px}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--signal);transition:width .25s var(--ease)}
nav.main a:hover::after{width:100%}
nav.main a.hot{color:var(--signal);border-bottom:1px solid var(--signal)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;cursor:pointer;color:var(--ink)}

.ribbon{background:var(--ink);color:rgba(246,241,231,.75);text-align:center;padding:6px 12px}
.ribbon span{color:var(--signal-soft)}

/* buttons */
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),transform .15s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.sig{border-color:var(--signal);color:var(--signal)}
.btn.sig:hover{background:var(--signal);color:#fff}

/* hero */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;margin-bottom:38px}
h1{font-size:clamp(40px,4.9vw,62px);line-height:1.02;letter-spacing:-.025em;font-weight:500;font-variation-settings:'wdth' 105}
h1 em,h2 em,.nm em{font-family:var(--edit);font-style:italic;font-weight:400;letter-spacing:-.01em}
.voice{font-family:var(--edit);font-style:italic;font-size:19px;line-height:1.5;color:rgba(22,24,27,.85);max-width:36ch;padding-bottom:6px}
.voice .sig{display:block;margin-top:16px;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(22,24,27,.5)}
.plate{border:1px solid var(--line);background:var(--card);padding:10px}
.plate img{display:block;width:100%;height:380px;object-fit:cover;object-position:center 62%}
.plate figcaption{margin-top:9px;display:flex;justify-content:space-between;gap:12px;color:rgba(22,24,27,.55)}

/* sections */
section{padding:54px 0 8px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;border-top:1px solid var(--line);padding-top:22px}
.sec-head h2{font-size:26px;font-weight:550;letter-spacing:-.02em}
.sec-head .side{color:rgba(22,24,27,.45)}
.sec-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,24,27,.45);margin-top:-16px;margin-bottom:20px}

/* record */
.rrow{display:grid;grid-template-columns:56px 1.5fr 1fr .9fr .8fr .8fr;gap:18px;align-items:baseline;padding:16px 10px;border-top:1px solid var(--hair);transition:background .15s,color .15s}
.rrow:last-child{border-bottom:1px solid var(--line)}
.rrow .no{font-family:var(--mono);font-size:11px;color:rgba(22,24,27,.45)}
.rrow .addr{font-weight:600;font-size:19px;letter-spacing:-.01em}
.rrow .sub{font-size:13px;color:rgba(22,24,27,.55)}
.rrow .dat,.rrow .prc{font-family:var(--mono);font-size:11.5px;text-align:right}
.rrow .st{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-align:right;text-transform:uppercase;color:rgba(22,24,27,.6)}
.rrow:hover{background:var(--ink);color:var(--paper)}
.rrow:hover .sub,.rrow:hover .no,.rrow:hover .st{color:rgba(246,241,231,.55)}
.rrow .st.sold{color:var(--signal)}
.rrow:hover .st.sold{color:var(--signal-soft)}

/* current listings */
.current{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.listing{border:1px solid var(--line);background:var(--card);padding:10px;text-decoration:none;display:block;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.listing:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,24,27,.12)}
.listing .imgw{overflow:hidden}
.listing img{display:block;width:100%;height:340px;object-fit:cover;transition:transform .6s var(--ease)}
.listing:hover img{transform:scale(1.03)}
.listing .cap{margin-top:10px;padding:0 2px 4px}
.listing .nm{font-size:21px;font-weight:600;letter-spacing:-.015em}
.listing .meta{margin-top:6px;display:flex;justify-content:space-between;color:rgba(22,24,27,.55)}
.listing .meta .r{color:var(--signal)}
.listing .src{margin-top:6px;color:rgba(22,24,27,.4)}

/* appraisal steps (home) */
.appraisal{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--card)}
.step{padding:26px 24px 30px;border-right:1px solid var(--hair)}
.step:last-child{border-right:none}
.step .sn{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.12em}
.step h4{font-size:17px;font-weight:600;margin:12px 0 10px;letter-spacing:-.01em}
.step p{font-size:13px;line-height:1.6;color:rgba(22,24,27,.68)}
.cta-row{margin-top:30px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cta-row .note{color:rgba(22,24,27,.5);font-size:12.5px}

/* footer */
footer.site{margin-top:60px;border-top:1px solid var(--line);padding:22px 0 34px;display:flex;justify-content:space-between;gap:40px;color:rgba(22,24,27,.5)}
footer.site .fic{max-width:60ch;font-size:11.5px;line-height:1.6}

/* listing detail */
.crumb{margin:26px 0 18px;color:rgba(22,24,27,.5)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--hair)}
.ld-head{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end;margin-bottom:30px}
.ld-head h1{font-size:clamp(34px,4vw,52px)}
.ld-meta{display:flex;gap:26px;flex-wrap:wrap;color:rgba(22,24,27,.6)}
.ld-price{text-align:right}
.ld-price .g{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--signal)}
.gallery{display:grid;grid-template-columns:8fr 4fr;gap:14px}
.gallery .main{border:1px solid var(--line);background:var(--card);padding:8px}
.gallery .main img{display:block;width:100%;height:520px;object-fit:cover}
.thumbs{display:grid;grid-template-rows:repeat(4,1fr);gap:14px}
.thumb{border:1px solid var(--hair);padding:5px;background:var(--card);cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.thumb:hover{transform:translateX(-3px)}
.thumb.active{border-color:var(--signal)}
.ld-cols{display:grid;grid-template-columns:7fr 5fr;gap:48px;margin-top:44px}
.ld-desc p{margin-bottom:16px;color:rgba(22,24,27,.78);line-height:1.7;max-width:60ch}
.specgrid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--card)}
.spec{padding:16px 18px;border-bottom:1px solid var(--hair)}
.spec:nth-child(odd){border-right:1px solid var(--hair)}
.spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,24,27,.45)}
.spec .v{font-size:16px;font-weight:600;margin-top:5px}

/* forms */
.form{border:1px solid var(--line);background:var(--card);padding:30px 28px}
.form h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.form .fh{color:rgba(22,24,27,.55);font-size:13px;margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,24,27,.55);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--hair);background:var(--paper);font-family:var(--sans);font-size:14.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s;border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2316181B'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.field .msg{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--signal);margin-top:6px}
.field.err .msg{display:block}
.form .ok-panel{display:none;border:1px solid var(--ok);padding:18px 20px;background:rgba(46,107,69,.06)}
.form .ok-panel .t{color:var(--ok);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.form .ok-panel p{font-size:13.5px;color:rgba(22,24,27,.75)}
.form.sent .form-body{display:none}
.form.sent .ok-panel{display:block}

/* stepped form */
.steps-nav{display:flex;border:1px solid var(--line);background:var(--card);margin-bottom:0;border-bottom:none}
.steps-nav .s{flex:1;padding:14px 10px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,24,27,.4);border-right:1px solid var(--hair);transition:color .3s,background .3s}
.steps-nav .s:last-child{border-right:none}
.steps-nav .s .sn{color:var(--signal);margin-right:8px}
.steps-nav .s.active{color:var(--ink);background:var(--paper)}
.steps-nav .s.done{color:rgba(22,24,27,.7)}
.steps-nav .s.done .sn::after{content:" \2713"}
.fstep{display:none}
.fstep.active{display:block;animation:stepin .45s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.fstep.active{animation:none}}
.fstep h3{margin-bottom:4px}
.fstep .fh{margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fnav{display:flex;justify-content:space-between;margin-top:26px}
.review-line{display:flex;justify-content:space-between;gap:20px;padding:11px 2px;border-bottom:1px solid var(--hair);font-size:14px}
.review-line .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(22,24,27,.45);padding-top:3px}
.review-line .v{text-align:right;max-width:65%}

/* confirmation */
.confirm-wrap{max-width:760px;margin:0 auto;padding:70px 0 40px}
.confirm-card{border:1px solid var(--line);background:var(--card);padding:44px 42px;text-align:left}
.confirm-card .stamp{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ok);border:1px solid var(--ok);display:inline-block;padding:7px 14px;margin-bottom:26px}
.confirm-card h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:18px}
.confirm-card p{color:rgba(22,24,27,.72);line-height:1.7;max-width:56ch;margin-bottom:14px}
.confirm-card .refline{font-family:var(--mono);font-size:13px;letter-spacing:.1em;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:14px 2px;margin:26px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.confirm-card .demo-note{font-size:12px;color:rgba(22,24,27,.5)}

/* page hero for subpages */
.page-head{padding:52px 0 10px}
.page-head h1{font-size:clamp(34px,4.2vw,54px)}
.page-head .lede{margin-top:16px;max-width:56ch;color:rgba(22,24,27,.7);font-size:16px;line-height:1.7}

/* responsive */
@media (max-width:1080px){
  .hero-grid,.ld-head,.ld-cols{grid-template-columns:1fr;gap:26px}
  .ld-price{text-align:left}
  .appraisal{grid-template-columns:1fr 1fr}
  .step:nth-child(2n){border-right:none}
  .step{border-bottom:1px solid var(--hair)}
  .rrow{grid-template-columns:44px 1.4fr 1fr .8fr .8fr}
  .rrow .dat{display:none}
  .gallery{grid-template-columns:1fr}
  .gallery .main img{height:420px}
  .thumbs{grid-template-rows:none;grid-template-columns:repeat(4,1fr)}
  .thumb{height:90px}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:18px 20px;gap:16px}
  nav.main.open{display:flex}
  nav.main a{margin-left:0;font-size:12px}
  .nav-toggle{display:block}
  header.site{position:sticky}
  .head-in{position:relative}
  .hero{padding:36px 0 26px}
  .hero-grid{margin-bottom:26px}
  .plate img{height:240px}
  .voice{font-size:17px}
  .current{grid-template-columns:1fr}
  .appraisal{grid-template-columns:1fr}
  .step{border-right:none}
  .rrow{grid-template-columns:1fr .9fr;row-gap:2px;padding:14px 6px}
  .rrow .no{display:none}
  .rrow .sub{grid-column:1;font-size:12px}
  .rrow .prc{grid-row:1;grid-column:2}
  .rrow .st{grid-row:2;grid-column:2}
  .frow{grid-template-columns:1fr}
  .form{padding:24px 20px}
  .confirm-card{padding:30px 24px}
  footer.site{flex-direction:column;gap:14px}
  .gallery .main img{height:300px}
}

/* anchor offset under sticky header */
section,[id]{scroll-margin-top:132px}
@media (max-width:720px){
  .steps-nav .s{padding:10px 4px;font-size:9px;letter-spacing:.08em}
  .steps-nav .s .sn{margin-right:4px}
}
/* listings discovery */
.disc-note{max-width:60ch;color:rgba(22,24,27,.7);font-size:15px;line-height:1.7;margin-bottom:30px}
/* about page */
.about-grid{display:grid;grid-template-columns:6fr 6fr;gap:48px;align-items:start}
.about-grid .plate img{height:340px}
.about-copy p{margin-bottom:16px;color:rgba(22,24,27,.78);line-height:1.7}
.about-copy .pull{font-family:var(--edit);font-style:italic;font-size:21px;line-height:1.45;color:var(--ink);margin:22px 0}
@media (max-width:1080px){.about-grid{grid-template-columns:1fr}}