/*
Theme Name: Elie Fouerti — Deal Sourcing
Theme URI: https://eliefouerti.info
Author: Elie Fouerti
Description: Real estate deal-sourcing site: what we look for, how deals are found and evaluated, and a protected submit-a-property form. SEO-ready with FAQ schema.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: elieinfo
*/

:root {
  --coal: #161616;
  --coal-2: #1f1f1f;
  --coal-3: #2a2a2a;
  --paper: #f5f3ee;
  --white: #fffefb;
  --amber: #f0b23a;
  --amber-dark: #d99a1f;
  --line: #e1ddd2;
  --grey: #6d6a63;
  --text: #34322e;
  --font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--coal); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--amber); color: var(--coal); padding: 10px 16px; }
.skip-link:focus { left: 8px; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--coal); border-bottom: 1px solid #2c2c2c; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
.brand-mark { width: 30px; height: 30px; background: var(--amber); display: grid; place-items: center; }
.brand small { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); border: 1px solid #3a3a3a; padding: 3px 8px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: #cfcac0; text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: #fff; }
.nav a.cta { background: var(--amber); color: var(--coal); font-weight: 700; padding: 10px 18px; }
.nav a.cta:hover { background: #ffc552; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; font-family: var(--font); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: all .2s; }
.btn.amber { background: var(--amber); color: var(--coal); }
.btn.amber:hover { background: #ffc552; }
.btn.line { border-color: #4a4a4a; color: #fff; }
.btn.line:hover { border-color: var(--amber); color: var(--amber); }
.btn.dark { background: var(--coal); color: #fff; }
.btn.dark:hover { background: #000; }

/* Hero */
.hero { background: var(--coal); color: #fff; padding: 88px 0 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#262626 1px, transparent 1px), linear-gradient(90deg, #262626 1px, transparent 1px); background-size: 56px 56px; opacity: .55; mask-image: linear-gradient(180deg, #000 30%, transparent 90%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; padding-bottom: 96px; }
.hero .mono { color: var(--amber); margin: 0 0 26px; display: flex; align-items: center; gap: 10px; }
.hero .mono::before { content: ""; width: 10px; height: 10px; background: var(--amber); }
.hero h1 { font-weight: 700; font-size: clamp(48px, 6.6vw, 92px); line-height: 1; letter-spacing: -.04em; margin: 0; }
.hero h1 mark { background: none; color: var(--amber); }
.hero .lead { font-size: 20px; color: #cfcac0; margin: 30px 0 38px; max-width: 580px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }

.ticket { background: var(--white); color: var(--coal); padding: 30px 30px 70px; position: relative; box-shadow: 14px 14px 0 var(--amber); }
.ticket-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 2px solid var(--coal); margin-bottom: 8px; }
.ticket-head b { font-size: 20px; letter-spacing: -.01em; }
.ticket-head .mono { color: var(--grey); margin: 0; }
.ticket-head .mono::before { display: none; }
.ticket-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px dashed var(--line); font-size: 15.5px; }
.ticket-row:last-of-type { border-bottom: 0; }
.ticket-row .mono { color: var(--grey); padding-top: 2px; margin: 0; }
.ticket-row .mono::before { display: none; }
.ticket-row span:last-child { font-weight: 600; }
.ticket .stamp { position: absolute; right: 22px; bottom: 20px; transform: rotate(-8deg); border: 2px solid var(--amber-dark); color: var(--amber-dark); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 6px 10px; }

.marquee { position: relative; border-top: 1px solid #2c2c2c; background: var(--coal-2); overflow: hidden; }
.marquee-track { display: flex; gap: 48px; width: max-content; padding: 20px 0; animation: scroll 40s linear infinite; }
.marquee-track span { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #a8a398; display: flex; align-items: center; gap: 48px; white-space: nowrap; }
.marquee-track span::after { content: "\25C6"; color: var(--amber); font-size: 10px; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Section basics */
.section { padding: 120px 0; }
.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin: 0 0 18px; display: flex; gap: 12px; align-items: center; }
.label b { color: var(--coal); background: var(--amber); padding: 2px 8px; font-weight: 500; }
h2 { font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 60px; }
.head p { margin: 0; font-size: 18px; color: var(--text); }
.head p.label { font-size: 12.5px; color: var(--grey); margin: 0 0 18px; }
.dark .head p.label { color: #a8a398; }

/* Buy box */
.buybox { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--coal); background: var(--white); }
.bb-col { padding: 34px 32px; }
.bb-col + .bb-col { border-left: 2px solid var(--coal); }
.bb-col h3 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 18px; display: flex; justify-content: space-between; align-items: baseline; }
.bb-col h3 .mono { color: var(--grey); }
.bb-col ul { list-style: none; margin: 0; padding: 0; }
.bb-col li { padding: 11px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; font-size: 16px; color: var(--text); }
.bb-col li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--amber); transform: translateY(-1px); }

/* Sourcing channels */
.dark { background: var(--coal); color: #fff; }
.dark .label { color: #a8a398; }
.dark .head p { color: #cfcac0; }
.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #2c2c2c; border: 2px solid #2c2c2c; }
.channel { background: var(--coal); padding: 36px 32px; transition: background .25s; }
.channel:hover { background: var(--coal-2); }
.channel .mono { color: var(--amber); }
.channel h3 { font-size: 23px; letter-spacing: -.015em; margin: 22px 0 10px; }
.channel p { margin: 0; color: #bdb8ad; font-size: 15.5px; }

/* Evaluate */
.eval-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.eval-intro { position: sticky; top: 110px; }
.eval-intro p { color: var(--text); margin: 24px 0 0; font-size: 18px; }
.checklist { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.checklist li { counter-increment: c; display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 28px 0; border-top: 2px solid var(--coal); }
.checklist li:last-child { border-bottom: 2px solid var(--coal); }
.checklist li::before { content: counter(c, decimal-leading-zero); font-family: var(--mono); font-size: 14px; color: var(--coal); background: var(--amber); height: 30px; display: grid; place-items: center; }
.checklist h3 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 6px; }
.checklist p { margin: 0; color: var(--text); font-size: 16px; }

/* Owners & brokers */
.owners { background: var(--white); border-top: 2px solid var(--coal); border-bottom: 2px solid var(--coal); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
.step { position: relative; padding-top: 30px; border-top: 2px solid var(--coal); }
.step .mono { position: absolute; top: -14px; left: 0; background: var(--amber); color: var(--coal); padding: 4px 10px; }
.step h3 { font-size: 22px; letter-spacing: -.01em; margin: 6px 0 8px; }
.step p { margin: 0; color: var(--text); font-size: 15.5px; }
.why-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 72px; padding-top: 48px; border-top: 1px dashed var(--line); }
.why-list div b { display: block; font-size: 18px; margin-bottom: 6px; }
.why-list div span { color: var(--grey); font-size: 15px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faq-list details { border-top: 2px solid var(--coal); }
.faq-list details:last-child { border-bottom: 2px solid var(--coal); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 50px 24px 0; position: relative; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: var(--coal); color: var(--amber); display: grid; place-items: center; font-family: var(--mono); font-size: 18px; }
.faq-list details[open] summary::after { content: "\2212"; background: var(--amber); color: var(--coal); }
.faq-list .answer { padding: 0 50px 26px 0; color: var(--text); }
.faq-list .answer p { margin: 0; }

/* Submit */
.submit { background: var(--coal); color: #fff; }
.submit-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.submit-info p { color: #cfcac0; margin: 24px 0 0; }
.submit-info ul { list-style: none; padding: 0; margin: 36px 0 0; }
.submit-info li { padding: 14px 0; border-top: 1px solid #2f2f2f; display: flex; gap: 12px; color: #e7e2d8; font-size: 16px; }
.submit-info li::before { content: "\2713"; color: var(--amber); font-weight: 700; }
.form-card { background: var(--white); color: var(--coal); padding: 40px; box-shadow: 14px 14px 0 var(--amber); }
.form-card h3 { margin: 0 0 26px; font-size: 24px; letter-spacing: -.015em; display: flex; justify-content: space-between; align-items: baseline; }
.form-card h3 .mono { color: var(--grey); }
.af-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.af-form .full { grid-column: 1 / -1; }
.af-form .group { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); padding-top: 10px; border-top: 1px dashed var(--line); }
.af-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.af-form input, .af-form select, .af-form textarea { width: 100%; border: 2px solid var(--line); background: #fff; border-radius: 0; font-family: var(--font); font-size: 16px; padding: 12px 14px; color: var(--coal); outline: none; transition: border-color .2s; }
.af-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--coal) 50%), linear-gradient(135deg, var(--coal) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.af-form textarea { min-height: 120px; resize: vertical; }
.af-form input:focus, .af-form select:focus, .af-form textarea:focus { border-color: var(--coal); }
.af-form .hp { position: absolute; left: -9999px; }
.af-form #af_captcha { max-width: 200px; }
.af-form .fine { font-size: 13px; color: var(--grey); margin: 0; }
.cf-turnstile { min-height: 65px; }
.form-note { padding: 14px 18px; margin-bottom: 22px; font-size: 15px; font-weight: 600; }
.form-note.ok { background: #e4f1dc; color: #23421a; }
.form-note.err { background: #f8e1d9; color: #7a2410; }

/* Footer */
.site-footer { background: #0f0f0f; color: #9a958b; padding: 64px 0 34px; font-size: 15px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid #262626; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--amber); }
.disclaimer { font-size: 13px; line-height: 1.6; color: #77736b; padding-top: 26px; max-width: 980px; margin: 0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; font-size: 13px; }

/* Other pages */
.page-body { padding: 120px 0; }
.page-body .entry { max-width: 760px; }
.page-body .entry h1 { font-size: 52px; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 32px; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none; } html { scroll-behavior: auto; } }

@media (max-width: 1000px) {
  .section { padding: 90px 0; }
  .hero-grid, .head, .eval-grid, .faq-grid, .submit-grid { grid-template-columns: 1fr; gap: 44px; }
  .head { gap: 20px; }
  .eval-intro { position: static; }
  .buybox, .channels { grid-template-columns: 1fr; }
  .bb-col + .bb-col { border-left: 0; border-top: 2px solid var(--coal); }
  .steps, .why-list { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ticket { max-width: 480px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .nav a:not(.cta), .brand small { display: none; }
  .hero { padding-top: 56px; }
  .hero-grid { padding-bottom: 72px; }
  .steps, .why-list, .af-form { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; box-shadow: 8px 8px 0 var(--amber); }
  .ticket { box-shadow: 8px 8px 0 var(--amber); }
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
}