/* Renew Pro Services — Articles section
   Shared styles for /articles/index.html and every article page.
   Uses the same color tokens and fonts as the main site (index.html)
   but a lighter, self-contained stylesheet since these pages have no
   dark hero image and don't need the homepage's gallery/lightbox JS. */

:root{
  --bone:#FAF7F2;
  --paper:#FFFFFF;
  --ink:#1E1611;
  --brown:#654127;
  --brown-deep:#3A2314;
  --clay:#FF914C;
  --clay-ink:#B85A17;
  --muted:#6E5B4C;
  --line:rgba(101,65,39,.15);
  --line-soft:rgba(101,65,39,.08);
  --shadow:0 1px 2px rgba(58,35,20,.05), 0 12px 36px -12px rgba(58,35,20,.16);
  --r:14px;
  --wrap:1120px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font:400 17px/1.7 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.015em;margin:0;line-height:1.15}
p{margin:0}
::selection{background:var(--clay);color:#fff}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;
  font-size:.9rem;font-weight:600;transition:.25s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--clay);color:#3A2314;box-shadow:0 8px 24px -10px rgba(255,145,76,.8)}
.btn-accent:hover{background:#ff9f61}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brown);background:#fff}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;gap:28px;padding-block:16px}
.brand{display:flex;align-items:center;flex-shrink:0;margin-right:auto}
.brand img{height:34px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:.9rem;font-weight:600;color:var(--muted);transition:.2s}
.nav-links a:hover{color:var(--ink)}
.nav-tel{display:none;align-items:center;gap:7px;font-size:.875rem;font-weight:600;color:var(--ink)}
.nav-tel svg{width:15px;height:15px;stroke:var(--clay-ink);flex-shrink:0}
@media(min-width:860px){ .nav-tel{display:flex} }
@media(max-width:700px){ .nav-links{display:none} }

/* ---- footer (compact version of the homepage footer) ---- */
footer{background:var(--brown-deep);color:#fff;padding-block:56px 28px;margin-top:90px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.f-h{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:16px}
.f-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.f-grid a:hover{color:var(--clay)}
footer .flogo{height:30px;margin-bottom:16px}
footer p{max-width:36ch;line-height:1.7;color:rgba(255,255,255,.68);font-size:.92rem}
.f-btm{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:rgba(255,255,255,.45)}
@media(max-width:680px){ .f-grid{grid-template-columns:1fr 1fr} }

/* ---- articles index: hero + card grid ---- */
.art-hero{padding:56px 0 40px;border-bottom:1px solid var(--line-soft)}
.art-hero .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-ink)}
.art-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);margin-top:12px}
.art-hero p{color:var(--muted);max-width:60ch;margin-top:16px;font-size:1.05rem}

.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-block:48px}
@media(max-width:900px){ .art-grid{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .art-grid{grid-template-columns:1fr} }

.art-card{background:var(--paper);border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);
  box-shadow:var(--shadow);transition:.25s var(--ease)}
.art-card:hover{transform:translateY(-4px)}
.art-card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.art-card .body{padding:22px 22px 24px}
.art-card .tag{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-ink)}
.art-card h2{font-size:1.3rem;margin-top:10px}
.art-card .excerpt{color:var(--muted);font-size:.92rem;margin-top:10px;line-height:1.6}
.art-card .meta{font-size:.78rem;color:var(--muted);margin-top:16px;opacity:.8}
.art-card.placeholder{display:flex;align-items:center;justify-content:center;min-height:220px;
  color:var(--muted);font-size:.9rem;text-align:center;border-style:dashed}

/* ---- single article page ---- */
.art-cover{display:block;width:100%;height:auto;border-radius:var(--r);margin-top:28px}
.art-head{padding:44px 0 0}
.art-head .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-ink)}
.art-head h1{font-size:clamp(2rem,5vw,3.4rem);margin-top:14px}
.art-head .meta{color:var(--muted);margin-top:18px;font-size:.92rem}

.art-body{max-width:72ch;margin:0 auto;padding:44px 24px 20px}
.art-body h2{font-size:1.6rem;margin-top:2.2em}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:1.25rem;margin-top:1.8em}
.art-body p{margin-top:1.15em;line-height:1.8;color:#2b2118}
.art-body ul,.art-body ol{margin-top:1.1em;padding-left:1.4em;line-height:1.8;color:#2b2118}
.art-body li{margin-bottom:.5em}
.art-body p a,.art-body li a,.art-body blockquote a,.art-body td a{
  color:var(--clay-ink);text-decoration:underline;text-underline-offset:2px}
.art-body blockquote{margin:2em 0;padding:6px 0 6px 22px;border-left:3px solid var(--clay);
  color:var(--muted);font-style:italic}
.art-body table{width:100%;border-collapse:collapse;margin-top:1.6em;font-size:.94rem}
.art-body th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:10px 14px;border-bottom:2px solid var(--line)}
.art-body td{padding:12px 14px;border-bottom:1px solid var(--line-soft)}

.art-cta{max-width:72ch;margin:52px auto 0;padding:34px;border-radius:var(--r);
  background:var(--bone);border:1px solid var(--line);text-align:center}
.art-cta h3{font-size:1.4rem}
.art-cta p{color:var(--muted);margin-top:10px}
.art-cta .btn{margin-top:20px}

.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.88rem;
  font-weight:600;margin-top:24px}
.back-link:hover{color:var(--ink)}