/* ==========================================================================
   SVL Real Estate — content pages (Philosophy, Why-us, Contact) + Projects archive
   Shares the visual language of single-property.css. Tokens promoted to :root
   so the shared components (.svl-label, .svl-btn, .svl-form) work outside .svl-single.
   ========================================================================== */

:root{
  --ink:#17242E;--ink-deep:#0B131A;--sky:#1F6690;--sky-deep:#143F58;--sky-soft:#8FB8CE;
  --plaster:#F3F1EC;--surface:#FFFFFF;--concrete:#6E6559;--line:#DED7CB;
  --r:4px;--wrap:1180px;--wrap-wide:1440px;
}

.svl-page,.svl-archive{
  background:var(--plaster);color:var(--ink);
  font-family:"Inter Tight",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip;
}
.svl-page *,.svl-archive *{box-sizing:border-box;}
.svl-page .wrap,.svl-archive .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,44px);}
.svl-page .wrap-wide,.svl-archive .wrap-wide{max-width:var(--wrap-wide);margin-inline:auto;padding-inline:clamp(20px,5vw,44px);}
.svl-page h1,.svl-page h2,.svl-page h3,
.svl-archive h1,.svl-archive h2,.svl-archive h3{
  font-family:"Inter","Inter Tight",serif;
  font-weight:700;line-height:1.05;letter-spacing:-0.02em;margin:0;
}

/* --- Page hero (compact, cinematic dark band) ----------------------------- */
.svl-phero{
  position:relative;min-height:min(62vh,580px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink-deep);
}
.svl-phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.svl-phero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(9,15,20,.86) 0%,rgba(9,15,20,.42) 48%,rgba(9,15,20,.12) 100%);
}
.svl-phero__inner{position:relative;width:100%;padding-block:clamp(34px,5vw,68px);color:#fff;}
.svl-phero .svl-label{color:var(--sky-soft);margin-bottom:clamp(14px,2vw,20px);}
.svl-phero__title{font-size:clamp(2.2rem,5.4vw,4.4rem);color:#fff;max-width:20ch;text-wrap:balance;}
.svl-phero__lead{
  margin:clamp(14px,2vw,20px) 0 0;max-width:52ch;color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6;
}

/* --- Prose (Philosophy) --------------------------------------------------- */
.svl-prose{max-width:70ch;}
.svl-prose p{font-size:clamp(1.04rem,1.6vw,1.2rem);line-height:1.78;margin:0 0 1.25em;padding:0;color:var(--ink);}
/* first paragraph of the editor content acts as the lead */
.svl-prose > p:first-child,
.svl-prose .lead{
  font-size:clamp(1.28rem,2.3vw,1.7rem);line-height:1.5;letter-spacing:-0.01em;color:var(--ink);
}
.svl-prose p:last-child{margin-bottom:0;}
.svl-quote{
  margin:clamp(32px,5vw,52px) 0;padding-left:clamp(20px,3vw,34px);
  border-left:2px solid var(--sky);
  font-family:"Inter",serif;font-weight:600;
  font-size:clamp(1.4rem,3vw,2.15rem);line-height:1.22;letter-spacing:-0.02em;
  color:var(--ink);max-width:26ch;
}

/* --- Reason cards (Why-us) ------------------------------------------------ */
.svl-reasons{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));
  gap:clamp(18px,2.4vw,28px);
}
.svl-reason{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,36px);
}
.svl-reason__ic{width:34px;height:34px;color:var(--sky);margin-bottom:clamp(16px,2vw,22px);}
.svl-reason__ic svg{width:100%;height:100%;display:block;}
.svl-reason h3{font-size:1.16rem;margin:0 0 .6rem;letter-spacing:-0.01em;}
.svl-reason p{margin:0;color:var(--concrete);font-size:1.01rem;line-height:1.62;}

.svl-lead{
  font-size:clamp(1.24rem,2.3vw,1.7rem);line-height:1.5;letter-spacing:-0.01em;
  max-width:60ch;color:var(--ink);margin:0 0 clamp(36px,5vw,60px);
}
/* the lead now wraps editor paragraphs */
.svl-lead p{
  margin:0 0 .65em;padding:0;
  font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;
}
.svl-lead p:last-child{margin-bottom:0;}

/* --- Contact info (lives on the dark contact band) ------------------------ */
.svl-cinfo{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,28px);}
.svl-cinfo li{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start;}
.svl-cinfo__ic{width:24px;height:24px;color:var(--sky-soft);margin-top:2px;}
.svl-cinfo__ic svg{width:100%;height:100%;display:block;}
.svl-cinfo__k{
  font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sky-soft);display:block;margin-bottom:.3rem;
}
.svl-cinfo__v{font-size:1.06rem;color:#fff;line-height:1.4;}
.svl-cinfo a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .2s;}
.svl-cinfo a:hover{border-color:var(--sky-soft);}

/* --- Projects archive ----------------------------------------------------- */
.svl-arch-hero{background:var(--ink);color:#fff;padding-block:clamp(56px,8vw,104px);}
.svl-arch-hero .svl-label{color:var(--sky-soft);}
.svl-arch-hero h1{font-size:clamp(2.4rem,5.6vw,4.6rem);color:#fff;max-width:16ch;}
.svl-arch-hero__lead{margin:clamp(16px,2vw,24px) 0 0;max-width:56ch;color:rgba(255,255,255,.78);font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6;}

.svl-filters{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,46px);
}
.svl-filter{
  font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.72em 1.25em;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--concrete);cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.svl-filter:hover{border-color:var(--sky);color:var(--ink);}
.svl-filter.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
.svl-card[hidden]{display:none;}
.svl-noresults{color:var(--concrete);font-size:1.05rem;margin:0;}

.svl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.svl-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:4/5;
}
.svl-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.svl-card:hover .svl-card__img{transform:scale(1.055);}
.svl-card__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,15,20,.88) 0%,rgba(9,15,20,.15) 58%,rgba(9,15,20,.05) 100%);}
.svl-card__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2vw,26px);color:#fff;}
.svl-card__tag{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-soft);}
.svl-card__tag--sold-out{display:inline-block;background:#c0392b;color:#fff;padding:.34em .8em;border-radius:999px;letter-spacing:.12em;}
.svl-card__title{font-family:"Inter",serif;font-weight:700;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.1;margin:.35rem 0 0;color:#fff;letter-spacing:-0.02em;}
.svl-card__sub{font-family:"Space Mono",monospace;font-size:.78rem;color:rgba(255,255,255,.8);margin-top:.45rem;display:flex;align-items:center;gap:.45rem;}
.svl-card__sub svg{width:14px;height:14px;flex:none;color:var(--sky-soft);}
.svl-card:focus-visible{outline:2px solid var(--sky);outline-offset:3px;}
.svl-empty{color:var(--concrete);font-size:1.1rem;}
.svl-archive .pagination,.svl-archive .nav-links{
  margin-top:clamp(34px,4vw,54px);display:flex;gap:8px;flex-wrap:wrap;
  font-family:"Space Mono",monospace;
}
.svl-archive .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;
  color:var(--ink);font-size:.85rem;transition:border-color .2s,background .2s;
}
.svl-archive .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink);}
.svl-archive .page-numbers:hover{border-color:var(--sky);}
.svl-archive .screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}

/* --- Shared CTA strip on pages -------------------------------------------- */
.svl-pcta{background:var(--ink);color:#fff;padding-block:clamp(44px,6vw,72px);}
.svl-pcta__row{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;}
.svl-pcta h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);max-width:20ch;}
.svl-pcta .svl-label{color:var(--sky-soft);}

@media(max-width:860px){
  .svl-phero{min-height:min(56vh,460px);}
}