/* THE LOFT FERNDALE — shared stylesheet
   Palette is contrast-corrected: every text colour now clears WCAG AA.
   Sage #7d9478 is retained for rules, borders and accents only — never for type. */

:root{
  --paper:#f5f0e8;
  --pill:#eeeae0;
  --ink:#1e1c18;
  --head:#3a3428;
  --body:#4a4438;
  --muted:#6b6254;
  --muted2:#78705f;
  --faint:#82796a;
  --sage:#4f6b4a;        /* text-safe sage */
  --sage-rule:#7d9478;   /* decorative only */
  --rule:#d4cfc4;
  --hair:#e0dbd2;
  --brass:#c8b89a;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--body);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  background-image:radial-gradient(ellipse at 20% 10%,#e8ede0 0%,transparent 50%),
                   radial-gradient(ellipse at 80% 90%,#ede8df 0%,transparent 50%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--rule);background:rgba(245,240,232,.92);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;
}
.header-inner{
  max-width:1080px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.wordmark{
  font-family:var(--serif);font-size:21px;font-weight:400;color:var(--head);
  text-decoration:none;letter-spacing:.04em;white-space:nowrap;
}
.wordmark span{color:var(--sage);font-style:italic}
.wordmark img{height:48px;width:auto;display:block;mix-blend-mode:multiply}
.site-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.site-nav a{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);
  text-decoration:none;font-weight:400;padding:4px 0;border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--head);border-bottom-color:var(--sage-rule)}
.nav-cta{
  background:var(--ink);color:var(--brass)!important;padding:11px 22px;
  border-bottom:none!important;font-weight:500;
}
.nav-cta:hover{background:#000}

/* ---------- layout ---------- */
.page{width:100%;max-width:820px;margin:0 auto;padding:64px 32px 96px}
.page-narrow{max-width:700px}
.page-wide{max-width:1080px}
section{margin-bottom:72px}
section:last-child{margin-bottom:0}

/* ---------- type ---------- */
.eyebrow{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);font-weight:500;margin-bottom:14px;
}
.headline{
  font-family:var(--serif);font-weight:300;font-size:clamp(42px,7vw,74px);
  line-height:1.02;color:var(--head);letter-spacing:-.01em;margin-bottom:20px;
}
.headline em,.h2 em,.cta-heading em{font-style:italic;color:var(--sage)}
.h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.6vw,46px);
  line-height:1.1;color:var(--head);letter-spacing:-.01em;margin-bottom:18px;
}
.h3{
  font-family:var(--serif);font-weight:400;font-size:23px;color:var(--head);
  line-height:1.25;margin-bottom:8px;
}
.lead{
  font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.6;
  color:var(--muted);margin-bottom:28px;max-width:60ch;
}
.body-text{font-size:16px;line-height:1.8;color:var(--muted);max-width:64ch}
.body-text p+p{margin-top:16px}
.small{font-size:14px;color:var(--muted2);line-height:1.7}
.fine{font-size:13px;color:var(--faint);line-height:1.7;font-style:italic;font-family:var(--serif)}

/* ---------- divider ---------- */
.divider{display:flex;align-items:center;gap:16px;margin:0 0 40px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--rule)}
.divider span{
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted2);
  letter-spacing:.06em;white-space:nowrap;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--brass);
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;padding:18px 46px;text-decoration:none;border:none;cursor:pointer;
  transition:background .2s ease;
}
.btn:hover{background:#000}
.btn-ghost{
  display:inline-block;background:transparent;border:1px solid var(--muted2);color:var(--muted);
  font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;padding:17px 32px;text-decoration:none;transition:all .2s ease;
}
.btn-ghost:hover{border-color:var(--head);color:var(--head)}
.btn-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pillar{background:var(--pill);padding:26px;border-left:2px solid var(--sage-rule)}
.pillar-title{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);
  font-weight:500;margin-bottom:10px;
}
.pillar-body{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);line-height:1.55}

/* ---------- feature band ---------- */
.feature{background:var(--pill);padding:42px 38px;border-left:3px solid var(--sage-rule)}

/* ---------- checklist ---------- */
.included{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:8px}
.included li{
  list-style:none;padding:15px 0;border-bottom:1px solid var(--hair);
  display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--muted);line-height:1.5;
}
.included li:nth-child(odd){padding-right:24px}
.included li:nth-child(even){padding-left:24px;border-left:1px solid var(--hair)}
.included li::before{
  content:'';flex-shrink:0;width:7px;height:7px;margin-top:8px;
  background:var(--sage-rule);transform:rotate(45deg);
}

/* ---------- pricing ---------- */
.pricing{width:100%;border-collapse:collapse;margin-top:24px}
.pricing thead tr{border-bottom:2px solid var(--sage-rule)}
.pricing th{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);
  font-weight:500;padding:0 0 14px;text-align:left;
}
.pricing th:not(:first-child),.pricing td:not(:first-child){text-align:center}
.pricing td{padding:20px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--muted);vertical-align:top}
.pricing tr.featured td{color:var(--head)}
.lease-name{font-family:var(--serif);font-size:20px;color:var(--head);display:block;margin-bottom:3px}
.lease-sub{font-size:13px;color:var(--muted2)}
.rate{font-family:var(--serif);font-size:25px;color:var(--head);display:block}
.rate-sub{font-size:12px;color:var(--muted2)}
.badge{
  display:inline-block;background:var(--pill);border:1px solid var(--sage-rule);color:var(--sage);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;margin-top:6px;font-weight:500;
}

/* ---------- steps ---------- */
.step{display:grid;grid-template-columns:52px 1fr;gap:22px;margin-bottom:32px;align-items:start}
.step-num{
  width:52px;height:52px;border:1px solid var(--rule);display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:22px;color:var(--sage);
}
.step-title{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--head);font-weight:500;margin-bottom:7px}

/* ---------- founders ---------- */
.founder{display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:start;margin-bottom:40px}
.founder-photo{width:190px;height:232px;border-left:2px solid var(--sage-rule);overflow:hidden}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(15%)}
.founder-name{font-family:var(--serif);font-weight:300;font-size:29px;color:var(--head);margin-bottom:5px}
.founder-title{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-bottom:16px;font-weight:500}

/* ---------- gallery ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.captions{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.caption-title{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:500;margin-bottom:7px}
.caption-body{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);line-height:1.55}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  padding:24px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:flex-start;gap:18px;font-family:var(--serif);font-size:21px;color:var(--head);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--sans);font-size:20px;color:var(--sage);flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq .answer{padding:0 0 26px;font-size:15px;color:var(--muted);line-height:1.8;max-width:66ch}
.faq .answer p+p{margin-top:14px}

/* ---------- form ---------- */
.form-group{margin-bottom:28px}
label{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);margin-bottom:9px;font-weight:500}
input,select,textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--rule);
  color:var(--head);font-family:var(--sans);font-weight:300;font-size:16px;padding:9px 0 10px;
  outline:none;transition:border-color .25s ease;border-radius:0;-webkit-appearance:none;appearance:none;
}
textarea{border:1px solid var(--rule);padding:12px;min-height:110px;resize:vertical}
::placeholder{color:#8d8778}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--sage-rule)}
textarea:focus{border-color:var(--sage-rule)}
select{
  cursor:pointer;padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2378705f' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- cta ---------- */
.cta{text-align:center;border-top:1px solid var(--rule);padding-top:60px}
.cta-heading{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.4vw,46px);color:var(--head);line-height:1.1;margin-bottom:14px}
.cta-body{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);line-height:1.7;margin-bottom:32px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rule);margin-top:40px;background:rgba(238,234,224,.5)}
.footer-inner{
  max-width:1080px;margin:0 auto;padding:48px 32px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
}
.footer-inner h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:500;margin-bottom:14px}
.footer-inner a{color:var(--muted);text-decoration:none;font-size:15px;line-height:2}
.footer-inner a:hover{color:var(--head)}
.footer-inner address{font-style:normal;font-size:15px;color:var(--muted);line-height:1.8}
.footer-bottom{
  border-top:1px solid var(--hair);padding:20px 32px;text-align:center;
  font-size:13px;color:var(--muted2);max-width:1080px;margin:0 auto;
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .page{padding:44px 22px 72px}
  .header-inner{padding:14px 22px;gap:14px}
  .wordmark img{height:40px}
  .site-nav{gap:16px;width:100%;justify-content:flex-start}
  .site-nav a{font-size:11px}
  .pillars,.included,.grid-2,.captions,.row,.footer-inner{grid-template-columns:1fr}
  .included li:nth-child(odd){padding-right:0}
  .included li:nth-child(even){padding-left:0;border-left:none}
  .founder{grid-template-columns:1fr;gap:22px}
  .founder-photo{width:100%;height:290px}
  .feature{padding:30px 24px}
  .pricing th,.pricing td{font-size:14px}
  .pricing th:not(:first-child),.pricing td:not(:first-child){text-align:left}
  .pricing,.pricing tbody,.pricing tr,.pricing td{display:block;width:100%}
  .pricing thead{display:none}
  .pricing tr{border-bottom:1px solid var(--hair);padding:18px 0}
  .pricing td{border:none;padding:4px 0}
}


/* ---------- announcement bar ---------- */
.announce{
  background:var(--ink);color:var(--brass);text-align:center;
  padding:12px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;line-height:1.5;
}
.announce a{color:var(--brass);text-decoration:none;display:block}
.announce a:hover{color:#fff}
.announce strong{color:#fff;font-weight:500}

/* ---------- offer line ---------- */
.offer-line{
  font-family:var(--serif);font-size:23px;color:var(--head);line-height:1.45;
  border-left:2px solid var(--sage-rule);padding-left:20px;margin:0 0 30px;
}
.offer-line strong{font-weight:400;font-size:30px;letter-spacing:-.01em}
.offer-line em{font-style:italic;color:var(--sage)}
.offer-line .sub{display:block;font-family:var(--sans);font-size:13px;
  letter-spacing:.02em;color:var(--muted2);margin-top:7px;line-height:1.6}

/* ---------- compact terms ---------- */
.terms{border-top:1px solid var(--hair);margin-top:8px}
.terms div{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--muted);
}
.terms div.lead-row{color:var(--head)}
.terms .t-rate{font-family:var(--serif);font-size:20px;color:var(--head);white-space:nowrap}


/* ---------- price headline sub-line ---------- */
.headline-sub{
  font-family:var(--sans);font-size:15px;color:var(--muted2);
  letter-spacing:.01em;line-height:1.7;margin:-4px 0 26px;max-width:58ch;
}
.headline-sub strong{color:var(--head);font-weight:500}