/* Proven Property Solutions: shared styles for /services/ and /areas/ pages.
   Tokens match the :root block in index.html. */
:root{
  --bg:#f5f7fa; --surface:#ffffff; --ink:#0f1d2b; --muted:#566476; --line:#dae0e8;
  --pine:#0f2a44; --pine-2:#0a1e33; --pine-ink:#f2f6fa; --hi:#f26b1d; --hi-ink:#0f1d2b; --link:#c2410c;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1520; --surface:#121f2d; --ink:#e7edf4; --muted:#9aa9ba; --line:#243447;
  --pine:#0f2a44; --pine-2:#0a1e33; --pine-ink:#eef3f8; --hi:#ff7a2e; --hi-ink:#0f1d2b; --link:#ff8a4c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1520; --surface:#121f2d; --ink:#e7edf4; --muted:#9aa9ba; --line:#243447;
  --pine:#0f2a44; --pine-2:#0a1e33; --pine-ink:#eef3f8; --hi:#ff7a2e; --hi-ink:#0f1d2b; --link:#ff8a4c; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--body)}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.05;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,5.4vw,4rem);font-weight:900;font-stretch:74%;text-transform:uppercase;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:850;font-stretch:80%}
h3{font-size:1.15rem;font-weight:750;font-stretch:90%}
p{margin:0}
a{color:inherit}
main a:not(.btn){color:var(--link);text-underline-offset:3px}
.kicker{font:500 .78rem/1.2 var(--mono);color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 1rem/1 var(--body);padding:.95rem 1.3rem;border-radius:6px;border:0;cursor:pointer;text-decoration:none}
.btn-hi{background:var(--hi);color:var(--hi-ink)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s,filter .15s}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}}

/* header */
header.top{background:var(--pine);color:var(--pine-ink);position:sticky;top:0;z-index:20;border-bottom:1px solid color-mix(in srgb,var(--pine-ink) 12%,transparent)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-block:1rem;max-width:1360px}
.logo,header .btn{white-space:nowrap}
.logo{display:flex;align-items:center;gap:.8rem;font:900 clamp(1.25rem,2.1vw,1.85rem)/1 var(--display);font-stretch:78%;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--pine-ink)}
.logo svg{flex:none;width:clamp(36px,3.4vw,50px);height:auto}
nav.links{display:flex;gap:1.4rem;font-weight:600;font-size:1rem;white-space:nowrap}
nav.links a{text-decoration:none;opacity:.85;color:var(--pine-ink)}
nav.links a:hover,nav.links a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px}
header .btn{padding:.7rem 1rem;font-size:.95rem}

/* page hero */
.phero{background:var(--pine);color:var(--pine-ink);padding-block:2.4rem 3rem}
.phero .wrap{display:grid;gap:1rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;font:500 .8rem/1.3 var(--mono);opacity:.85}
.crumbs li+li::before{content:"/";margin-right:.35rem;opacity:.6}
.crumbs a{color:var(--pine-ink)}
.phero h1 .hi{color:var(--hi)}
.phero .lede{font-size:1.1rem;max-width:44rem;opacity:.92}
.phero .actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.phero .actions span{font-size:.9rem;opacity:.85}

section{padding-block:3.2rem}
section + section{padding-top:0}
.sec-head{display:grid;gap:.6rem;margin-bottom:1.4rem;max-width:46rem}
.sec-head p{color:var(--muted);font-size:1.03rem}
.prose{max-width:46rem;display:grid;gap:1rem}
.prose p{font-size:1.03rem}

/* service list */
ul.svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
ul.svc-list li{background:var(--surface);padding:.75rem 1rem;font-size:.95rem}

/* steps */
ol.steps{padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;counter-reset:s}
.steps li{list-style:none;display:grid;gap:.45rem;align-content:start;border-top:3px solid var(--ink);padding-top:.9rem}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:900 2rem/1 var(--display);font-stretch:75%;color:var(--hi)}
.steps p{color:var(--muted);font-size:.95rem}

/* cards (hubs, related, areas) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem;display:grid;gap:.35rem;align-content:start;text-decoration:none;color:var(--ink)}
main a.card{color:var(--ink);text-decoration:none}
a.card:hover{border-color:var(--hi)}
.card b{font:800 1.08rem/1.15 var(--display);font-stretch:88%}
.card span{font-size:.88rem;color:var(--muted)}
.grp{margin:2rem 0 .9rem;font-size:1.5rem}
.grp:first-child{margin-top:0}

/* two-column info */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.4rem 1.5rem;display:grid;gap:.6rem;align-content:start}
.panel ul{margin:0;padding-left:1.1rem;color:var(--muted);display:grid;gap:.25rem}
.panel p{color:var(--muted)}
.note{border-left:6px solid var(--hi)}

/* cta + footer */
.cta{background:var(--hi);color:var(--hi-ink)}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:2.6rem}
.cta h2{font-size:clamp(1.7rem,3.8vw,2.5rem);text-transform:uppercase;font-stretch:74%}
.cta .btn{background:var(--hi-ink);color:var(--hi)}
footer{background:var(--pine-2);color:var(--pine-ink)}
footer .wrap{display:grid;gap:1.2rem;padding-block:2.2rem;font-size:.88rem}
footer .slogan-line{font:900 1.5rem/1 var(--display);font-stretch:74%;text-transform:uppercase}
footer .slogan-line span{color:var(--hi)}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
footer nav a{opacity:.85;text-underline-offset:3px}
footer .legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;opacity:.75}

.mbar{display:none}
@media (max-width:900px){
  html,body{overflow-x:clip}
  header.top .wrap{flex-wrap:wrap;row-gap:.55rem;padding-block:.7rem .5rem}
  nav.links{display:flex;order:3;flex:1 1 100%;width:100%;min-width:0;max-width:100%;overflow-x:auto;gap:.4rem;padding-bottom:.35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{flex:none;scroll-snap-align:start;font-size:.9rem;padding:.45rem .8rem;border-radius:999px;background:color-mix(in srgb,var(--pine-ink) 10%,transparent);border:1px solid color-mix(in srgb,var(--pine-ink) 18%,transparent);opacity:1;text-decoration:none}
  nav.links a[aria-current]{background:var(--hi);color:var(--hi-ink);border-color:var(--hi);text-decoration:none}
  ul.svc-list,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  ol.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.6rem max(16px,env(safe-area-inset-left,0px)) calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--pine);border-top:1px solid color-mix(in srgb,var(--pine-ink) 15%,transparent)}
  .mbar .btn{flex:1}
  body{padding-bottom:72px}
}
@media (max-width:520px){
  ul.svc-list,.cards,ol.steps{grid-template-columns:1fr}
  header .btn{display:none}
  section{padding-block:2.6rem}
}
footer .fifty{font-weight:700;color:var(--hi)}
footer .legal .fifty{color:var(--hi)!important;font-weight:700;opacity:1}
@media (max-width:520px){.logo{font-size:1.15rem;gap:.55rem}.logo svg{width:32px}header .btn{display:none}}