/* =====================================================================
   CHRISTIE MOREIRA — shared sub-page components
   Loaded AFTER christie.css, BEFORE palette.css. Colors come from palette.
   These are the reusable pieces that previously lived inline on the
   two-doors home, promoted so every sub-page renders identically.
   ===================================================================== */

/* ---- checklist (sellers) ---- */
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.6rem; margin-top:1.8rem; }
.check{ display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start; }
.check .tk{ width:24px; height:24px; border:1.5px solid var(--brass); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--brass); flex:none; margin-top:.1rem; }
.check b{ font-family:var(--serif); font-weight:500; color:var(--charcoal); font-size:1.04rem; display:block; }
.check span{ font-size:.88rem; color:var(--text-soft); line-height:1.5; }
@media (max-width:760px){ .checks{ grid-template-columns:1fr; } }

/* ---- bullet lists with brass dots ---- */
.sellpls{ margin-top:.7rem; display:grid; gap:.6rem; }
.sellpls p{ font-size:.9rem; color:var(--text-soft); line-height:1.55; padding-left:1.1rem; position:relative; }
.sellpls p::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--brass); }
.buyplus{ margin-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--line); padding-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.8rem; }
.buyplus p{ font-size:.9rem; color:var(--text-soft); line-height:1.55; padding-left:1.1rem; position:relative; }
.buyplus p::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--brass); }
@media (max-width:760px){ .buyplus{ grid-template-columns:1fr; } }

/* ---- 3-up mini cards (buyers) ---- */
.buyers__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.4rem); margin-top:clamp(2rem,4vw,3rem); }
.bcard{ border-top:1px solid var(--line); padding-top:1.3rem; }
.bcard h3{ font-size:1.18rem; font-weight:500; margin-bottom:.5rem; }
.bcard p{ font-size:.92rem; color:var(--text-soft); line-height:1.6; }
@media (max-width:760px){ .buyers__grid{ grid-template-columns:1fr; } }

/* ---- numbered pillars (works on dark or light) ---- */
.pillars{ margin-top:1.5rem; }
.pillar{ padding:1.1rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.pillar:last-child{ border-bottom:1px solid var(--line); }
.pillar b{ font-family:var(--serif); color:var(--charcoal); font-weight:500; font-size:1.08rem; display:block; margin-bottom:.15rem; }
.pillar span{ color:var(--text-soft); font-size:.92rem; line-height:1.55; }
.pillar .no{ font-family:var(--sans); font-size:.7rem; letter-spacing:.16em; color:var(--brass); padding-top:.3rem; }
/* dark context (charcoal section) */
.on-charcoal .pillar{ border-top-color:rgba(246,241,235,.16); }
.on-charcoal .pillar:last-child{ border-bottom-color:rgba(246,241,235,.16); }
.on-charcoal .pillar b{ color:#fff; }
.on-charcoal .pillar span{ color:rgba(246,241,235,.74); }
.on-charcoal .pillar .no{ color:var(--brass-light); }

/* ---- benefit chips (why epique) ---- */
.epq{ background:var(--ivory-deep); border-block:1px solid var(--line); }
.epq__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); margin-top:clamp(2rem,4vw,2.6rem); }
.ben{ background:var(--white); border:1px solid var(--line); padding:1.5rem 1.4rem; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.ben:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lux); }
.ben b{ font-family:var(--serif); font-weight:500; font-size:1.12rem; line-height:1.45; color:var(--charcoal); display:block; }
.ben span{ font-size:.9rem; color:var(--text-soft); line-height:1.6; }
@media (max-width:820px){ .epq__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .epq__grid{ grid-template-columns:1fr; } }

/* ---- stats row ---- */
.auth__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,3rem); }
.auth__grid.g4{ grid-template-columns:repeat(4,1fr); }
.stat2{ text-align:center; }
.stat2__n{ font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--brass); line-height:1; }
.stat2__l{ font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); margin-top:.7rem; }
.creds .stat2{ border-top:1px solid var(--brass); padding-top:1.2rem; }
.creds .stat2__n{ font-size:clamp(1.2rem,2.1vw,1.6rem); line-height:1.15; }
@media (max-width:680px){ .auth__grid,.auth__grid.g4{ grid-template-columns:1fr 1fr; } }

/* ---- pre-approval / financing band ---- */
.preapp{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(420px,46vw,560px); background:var(--charcoal); color:var(--ivory); }
.preapp__copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(2.5rem,5vw,4.5rem) clamp(1.6rem,4vw,4.5rem); }
.preapp__copy .eyebrow{ color:var(--brass-light); margin-bottom:1.1rem; }
.preapp h2{ color:#fff; font-size:clamp(2rem,4vw,3.2rem); }
.preapp__subline{ font-family:var(--serif); font-style:italic; color:var(--brass-light); font-size:clamp(1.2rem,2.2vw,1.7rem); margin-top:.4rem; }
.preapp p.body{ color:rgba(246,241,235,.82); max-width:46ch; margin-top:1.1rem; line-height:1.7; }
.preapp .fine{ color:rgba(246,241,235,.6); font-size:.82rem; margin-top:.9rem; max-width:44ch; line-height:1.55; }
.preapp__media{ position:relative; overflow:hidden; }
.preapp__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .preapp{ grid-template-columns:1fr; } .preapp__media{ min-height:300px; order:-1; } }

/* ---- journal grid ---- */
.jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,3rem); }
.jc .ratio img{ transition:transform 1.1s var(--ease); }
.jc:hover .ratio img{ transform:scale(1.05); }
.jc h3{ font-size:1.2rem; font-weight:500; line-height:1.3; margin-top:1rem; }
.jc .excerpt{ font-size:.92rem; color:var(--text-soft); line-height:1.6; margin-top:.55rem; }
.jc .meta{ font-family:var(--sans); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brass); margin-top:.9rem; display:block; }
@media (max-width:760px){ .jgrid{ grid-template-columns:1fr; } }

/* ---- charcoal section helper ---- */
.on-charcoal{ background:var(--charcoal); color:var(--ivory); }
.on-charcoal h2{ color:#fff; }
.on-charcoal h2 em{ font-style:italic; color:var(--brass-light); }
.on-charcoal .eyebrow{ color:var(--brass-light); }
.on-charcoal .idx{ color:var(--brass-light); }
.on-charcoal .lead{ color:rgba(246,241,235,.86); }
.on-charcoal .hr{ background:rgba(246,241,235,.16); }

/* ---- filter tabs (journal) ---- */
.ptabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.ptab{ font-family:var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); background:transparent; border:1px solid var(--line); padding:.7rem 1.2rem; cursor:pointer; transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.ptab:hover{ color:var(--brown); border-color:var(--brass); }
.ptab.active{ color:var(--ivory); background:var(--brown); border-color:var(--brown); }

/* ---- simple contact form ---- */
.cform{ display:grid; gap:1.1rem; }
.cform .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.cform label{ display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.5rem; }
.cform input,.cform select,.cform textarea{ width:100%; font-family:var(--sans); font-size:.95rem; color:var(--text); background:var(--white); border:1px solid var(--line); padding:.85rem 1rem; transition:border-color .35s var(--ease); }
.cform input:focus,.cform select:focus,.cform textarea:focus{ outline:none; border-color:var(--brass); }
.cform textarea{ min-height:130px; resize:vertical; }
.form-success{ display:none; margin-top:1rem; padding:1rem 1.2rem; background:var(--ivory-deep); border:1px solid var(--line); font-family:var(--sans); font-size:.9rem; color:var(--brown-deep); }
.form-success.show{ display:block; }
@media (max-width:600px){ .cform .row2{ grid-template-columns:1fr; } }