/* jonathantruelove.com redesign (editorial). Fonts are self-hosted in /fonts/fonts.css: no requests to Google Fonts. */
:root{
  --ink:#161a1d;--navy:#0b2b40;--navy-deep:#0b2230;--cream:#f5f1e9;--paper:#fbfaf7;--card:#fff;--line:#d8d3ca;--muted:#6d716f;--rust:#6e241f;--brass:#8a6a3a;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
section[id],form[id],article[id],h3[id]{scroll-margin-top:90px}

/* Header */
.site-header{height:78px;display:flex;align-items:center;padding:0 4.5vw;border-bottom:1px solid var(--line);background:rgba(251,250,247,.96);position:sticky;top:0;z-index:20}
.brand{font:500 22px/1 var(--serif);letter-spacing:.07em;text-decoration:none;margin-right:auto;text-transform:uppercase}
.site-header nav{display:flex;gap:2.2vw;align-items:center}
.site-header nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:500}
.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--rust)}
.site-header nav a.cta{border:1px solid var(--ink);padding:9px 14px}
.site-header nav a.cta:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.menu{display:none}

/* Shared type */
.eyebrow{font:600 11px/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;margin:0 0 24px}
.big{font:500 clamp(48px,5vw,78px)/.95 var(--serif);letter-spacing:-.04em;margin:0 0 28px}
.small,.note{font-size:13px;color:var(--muted)}
.btn{display:inline-block;padding:14px 24px;border:1px solid var(--ink);font:500 11px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;background:transparent;color:var(--ink);cursor:pointer}
.btn::after{content:" \2192"}
.btn.solid{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary{background:#fff;border-color:#fff;color:var(--navy-deep)}
.btn.ghost,.btn.light{border-color:#ffffffa0;color:#fff}
.btn.outline{border-color:var(--ink)}
.btn:hover{opacity:.88}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:end;padding:8vw 7vw 6vw}
.hero-copy{padding-bottom:10px}
.hero h1{font:500 clamp(64px,9vw,148px)/.86 var(--serif);letter-spacing:-.045em;margin:0}
.hero .role{font:500 35px/1.1 var(--serif);margin:0 0 24px}
.hero .lead{max-width:590px;margin:0 0 26px}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 16px;font-size:13px}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rust)}

/* Stats strip */
.proof{display:grid;grid-template-columns:repeat(4,1fr);padding:32px 4vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof .stat{text-align:center;border-right:1px solid var(--line);padding:6px 14px}
.proof .stat:last-child{border-right:0}
.proof em{display:block;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--muted);margin-bottom:10px}
.proof b{display:block;font:500 40px/1.1 var(--serif);color:var(--rust);margin-bottom:6px}
.proof span{display:block;font-size:13px;line-height:1.4;color:var(--ink)}

/* Section shells */
.section{padding:7vw 7vw 3vw}
.section-heading{margin-bottom:3vw}
.intro-copy{max-width:860px;font:500 23px/1.45 var(--serif);margin:0}

/* Timeline */
.timeline{padding:0 7vw 6vw}
.timeline article{display:grid;grid-template-columns:150px 1fr 1.5fr;gap:35px;border-top:1px solid var(--line);padding:30px 0}
.timeline .when{font-size:12px;letter-spacing:.1em;padding-top:6px}
.timeline h3{font:500 25px/1.25 var(--serif);margin:0 0 6px}
.timeline .org{margin:0;color:var(--muted);font-size:15px}
.timeline p{margin:0}
.timeline ul{margin:0;padding-left:18px}
.timeline li{margin:0 0 6px}
.timeline li::marker{color:var(--rust)}

/* Earlier career */
.earlier{background:var(--navy);color:#fff;padding:7vw;display:grid;grid-template-columns:1fr 2fr;gap:8vw}
.earlier .big{color:#fff}
.earlier-grid{display:grid;grid-template-columns:1fr 1fr}
.earlier-grid article{padding:25px;border-top:1px solid #ffffff35}
.earlier-grid .when{font-weight:600;font-size:13px;letter-spacing:.06em}
.earlier-grid h4{font:500 22px/1.25 var(--serif);margin:8px 0}
.earlier-grid p{font-size:14px;margin:0 0 6px}
.earlier-grid .org{color:#ffffffb0}

/* Projects gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 7vw;padding:0 0 6vw}
.proj{margin:0;background:#fff;border:1px solid var(--line);overflow:hidden}
.proj img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.proj figcaption{padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.proj figcaption b{font:500 17px/1.3 var(--serif)}
.proj figcaption span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Expertise */
.four{display:grid;grid-template-columns:repeat(4,1fr);padding:0 7vw 6vw;gap:0 20px}
.four article{padding:25px 0;border-top:1px solid var(--ink)}
.four h4{font:500 25px/1.25 var(--serif);margin:0 0 12px}
.four p{margin:0;font-size:16px}

/* Numbered sections (consultancy, acquisitions, investors, sell, for sale, business, book a call) */
.opps{padding:0 7vw}
.opp{display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--line);padding:55px 0}
.opp>.num{font:500 55px/1 var(--serif);color:#c9c4ba}
.opp h2{font:500 38px/1.15 var(--serif);margin:0 0 22px;letter-spacing:-.02em}
.opp-body{display:grid;grid-template-columns:1.5fr 1fr;gap:5vw;align-items:start}
.opp-body p{margin:0 0 14px;max-width:700px}
.opp-body .lede{font:500 22px/1.45 var(--serif)}
.aside{border-left:2px solid var(--rust);padding:4px 0 4px 22px;font-size:15px}
.aside p{margin:0}
.aside a,.opp-body a:not(.btn){color:var(--navy);font-weight:500}
.opp .panels{grid-column:2}
.sector-panel{padding:40px;margin:0 0 26px;background:#e9e4da}
.sector-panel.alt{background:#dfe4e1}
.sector-panel .eyebrow{margin-bottom:14px}
.sector-panel h3{font:500 34px/1.15 var(--serif);margin:0 0 16px}
.sector-panel p{margin:0 0 14px;max-width:760px}
.sector-panel ul{margin:0 0 18px;padding-left:18px;max-width:760px}
.sector-panel li{margin:8px 0}
.sector-panel li::marker{color:var(--rust)}

/* Property feature */
.property-feature{background:var(--cream);margin-top:3vw}
.property-copy{padding:7vw;display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:end}
.property-copy p{max-width:640px}
.property-copy .lede{font:500 22px/1.45 var(--serif)}
.facts{margin:0}
.facts div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:12px 0}
.facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding-top:3px}
.facts dd{margin:0;text-align:right}

/* LandlordProof */
.landlordproof{background:#20282c;color:#fff;padding:7vw;display:grid;grid-template-columns:1.2fr 1fr;gap:10vw}
.landlordproof h2{font:500 65px/1 var(--serif);margin:0 0 24px}
.landlordproof .lede{font:500 23px/1.45 var(--serif)}
.landlordproof .buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.landlordproof .facts{margin:0;display:grid;grid-template-columns:1fr 1fr}
.landlordproof .facts div{display:block;border-top:1px solid #ffffff35;padding:20px}
.landlordproof .facts dt{display:block;font-size:10px;letter-spacing:.15em;margin-bottom:7px}
.landlordproof .facts dd{text-align:left}

/* Contact + enquiry form */
.contact{background:var(--navy-deep);color:#fff;padding:8vw 7vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start}
.contact.single{display:block}
.contact .big{color:#fff}
.contact a{color:#fff}
.contact p{color:#d6dde3;max-width:620px}
.links{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.hint{font-size:14px}
.disclaimer{font-size:13px;line-height:1.6;margin:36px 0 0;padding-top:22px;border-top:1px solid #ffffff25;max-width:760px}
.enquiry{background:#ffffff08;border:1px solid #ffffff30;padding:34px;color:#fff}
.enquiry.in-panel{background:var(--navy-deep);border-color:var(--navy-deep);margin:0 0 26px}
.enquiry h3{font:500 30px/1.2 var(--serif);margin:0 0 22px;color:#fff}
.enquiry .fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.enquiry .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.enquiry .field.full{grid-column:1/-1}
.enquiry label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.enquiry .req{color:#e2c79b}.enquiry .opt{color:#b8c2ca;text-transform:none;letter-spacing:0}
.enquiry input,.enquiry select,.enquiry textarea{display:block;width:100%;padding:14px;background:transparent;border:1px solid #ffffff60;color:#fff;font:400 16px/1.4 var(--sans);border-radius:0;-webkit-appearance:none;appearance:none}
.enquiry select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.enquiry select option{color:#000}
.enquiry textarea{min-height:150px;resize:vertical}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:2px solid #e2c79b;outline-offset:1px}
.enquiry .actions{margin-top:24px}
.enquiry button.btn{font-family:var(--sans)}
.enquiry p.privacy{font-size:13px;color:#b8c2ca;margin:16px 0 0;max-width:620px}
.enquiry p.privacy a{color:#fff}
.enquiry .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Footer */
footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:25px 4vw;font-size:12px;background:#071821;color:#d9d9d9}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline}

/* Sub pages */
.subhero{padding:9vw 7vw 5vw;background:var(--cream)}
.subhero h1{font:500 clamp(44px,6vw,88px)/1 var(--serif);letter-spacing:-.035em;margin:0 0 22px}
.subhero .lead{max-width:680px;font-size:19px;margin:0}
.content{max-width:1050px;margin:auto;padding:5vw 4vw 7vw}
.feed article.card{padding:38px 0;border-top:1px solid var(--line)}
.feed article.card:first-child{border-top:0;padding-top:0}
.feed .when{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--rust);margin:0 0 10px;font-weight:600}
.feed h2{font:500 32px/1.2 var(--serif);margin:0 0 16px}
.feed p{margin:0 0 14px;max-width:780px}
.feed small{color:var(--muted)}
.feed small a{color:var(--navy)}
.card-link{display:inline-block;margin-top:6px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);font-weight:600}
.card-link::after{content:" \2192"}
.legal h3{font:500 26px/1.25 var(--serif);margin:38px 0 12px}
.legal h3:first-of-type{margin-top:0}
.legal ul{margin:0 0 14px;padding-left:20px;max-width:780px}
.legal li{margin:5px 0}
.legal li::marker{color:var(--rust)}
.legal a{color:var(--navy)}

@media(max-width:1100px){
  .four{grid-template-columns:1fr 1fr}
  .opp-body{grid-template-columns:1fr}
}
@media(max-width:850px){
  .site-header{height:65px}
  .brand{font-size:17px}
  .menu{display:block;border:0;background:none;font:500 12px var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);padding:10px 0 10px 12px;cursor:pointer}
  .site-header nav{display:none;position:absolute;top:65px;left:0;right:0;background:var(--paper);padding:20px 7vw 26px;flex-direction:column;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line)}
  .site-header.open nav{display:flex}
  .site-header nav a{font-size:13px}
  section[id],form[id],article[id],h3[id]{scroll-margin-top:75px}
  .hero,.earlier,.property-copy,.landlordproof,.contact{grid-template-columns:1fr}
  .hero{padding:50px 7vw 40px;gap:26px}
  .hero-copy{padding:0}
    .hero h1{font-size:68px}
  .hero .role{font-size:28px}
  .proof{grid-template-columns:1fr 1fr;padding:22px 5vw}
  .proof .stat{padding:16px 8px;border-right:0;border-bottom:1px solid var(--line)}
  .proof .stat:nth-child(odd){border-right:1px solid var(--line)}
  .proof .stat:nth-child(n+3){border-bottom:0}
  .proof b{font-size:32px}
  .section{padding:60px 7vw 30px}
  .intro-copy{font-size:20px}
  .timeline article{grid-template-columns:1fr;gap:8px}
  .earlier-grid,.four,.landlordproof .facts{grid-template-columns:1fr}
  .earlier-grid article{padding:22px 0}
  .gallery{grid-template-columns:1fr 1fr;gap:12px;margin:0 7vw;padding:0 0 40px}
  .proj figcaption{padding:10px 12px}
  .proj figcaption b{font-size:14.5px}
  .four{gap:0}
  .opp{grid-template-columns:1fr;padding:40px 0}
  .opp>.num{font-size:38px;margin-bottom:12px}
  .opp .panels{grid-column:1}
  .opp h2{font-size:32px}
  .sector-panel{padding:26px 22px}
  .sector-panel h3{font-size:27px}
    .property-copy{padding:50px 7vw;gap:30px}
  .landlordproof{gap:30px;padding:60px 7vw}
  .landlordproof h2{font-size:48px}
  .contact{padding:60px 7vw;gap:30px}
  .enquiry{padding:24px 20px}
  .enquiry .fields{grid-template-columns:1fr}
  .enquiry button.btn{width:100%}
  .btn{letter-spacing:.08em;padding:13px 16px}
  .links .btn.primary{width:100%;text-align:center}
  footer{flex-direction:column;align-items:flex-start}
  .subhero{padding:60px 7vw 40px}
  .feed h2{font-size:27px}
  .content{padding:40px 7vw 60px}
}