/* Arcolos vzw — shared styles for service & location landing pages.
   Reuses the brand palette from the homepage (index.html). Dark theme only. */
:root{
  --bg:#000000; --bg2:#080809; --panel:#0d0e10; --line:#1c1d20;
  --white:#ffffff; --muted:#d3d7dd; --dim:#a7adb5;
  --blue:#5b8dff; --blue-bright:#5b8dff; --blue-deep:#1f56cf;
  --gold1:#f0d271; --gold2:#b98f2a;
  --maxw:1080px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--muted);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:var(--blue-bright); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* Header */
header.site{ border-bottom:1px solid var(--line); background:rgba(0,0,0,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; max-width:var(--maxw); margin:0 auto; padding-left:22px; padding-right:22px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--white); font-weight:800; letter-spacing:.02em; font-size:18px; }
.brand img{ width:32px; height:32px; object-fit:contain; }
.bar nav{ display:flex; align-items:center; gap:20px; }
.bar nav a{ color:var(--dim); font-size:14px; font-weight:600; text-decoration:none; }
.bar nav a:hover{ color:var(--white); }
.bar .btn-sm{ background:var(--blue); color:#fff; padding:9px 16px; border-radius:9px; font-size:13.5px; font-weight:700; text-decoration:none; }
.bar .btn-sm:hover{ background:var(--blue-bright); }
@media(max-width:620px){ .bar nav a:not(.btn-sm){ display:none; } }

/* Breadcrumb */
.crumb{ max-width:var(--maxw); margin:0 auto; padding:16px 22px 0; font-size:13px; color:var(--dim); }
.crumb a{ color:var(--dim); text-decoration:none; } .crumb a:hover{ color:var(--white); }
.crumb span{ color:var(--muted); }

/* Hero */
main{ padding-bottom:20px; }
.hero{ padding:40px 0 26px; }
.eyebrow{ color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 14px; }
h1{ font-size:clamp(30px,5vw,46px); line-height:1.1; margin:0 0 16px; font-weight:800; color:var(--white); letter-spacing:-.01em; }
.lead{ font-size:19px; color:var(--muted); max-width:760px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.btn{ display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:13px 22px; border-radius:10px; transition:all .2s; border:1px solid transparent; }
.btn-primary{ background:var(--blue); color:#fff; } .btn-primary:hover{ background:var(--blue-bright); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--white); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--blue); color:var(--blue-bright); }

/* Sections */
section.block{ padding:34px 0; border-top:1px solid var(--line); }
h2{ font-size:clamp(22px,3vw,30px); line-height:1.2; margin:0 0 14px; font-weight:800; color:var(--white); letter-spacing:-.01em; }
h3{ font-size:18px; margin:22px 0 8px; font-weight:700; color:var(--white); }
p{ margin:0 0 14px; } .muted{ color:var(--dim); }
ul.ticks{ list-style:none; padding:0; margin:16px 0; display:grid; gap:10px; }
ul.ticks li{ position:relative; padding-left:30px; color:var(--muted); }
ul.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--blue-bright); font-weight:800; }

/* Cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:18px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; }
.card h3{ margin-top:0; }
.card p{ color:var(--dim); font-size:14.5px; margin:0; }
.card a.more{ display:inline-block; margin-top:12px; font-size:14px; font-weight:700; text-decoration:none; }

/* Local towns */
.towns{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.towns span{ background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--muted); }

/* FAQ */
.faq{ margin-top:8px; }
.faq details{ border:1px solid var(--line); border-radius:12px; padding:4px 18px; margin-bottom:10px; background:var(--panel); }
.faq summary{ cursor:pointer; padding:14px 0; font-weight:700; color:var(--white); list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq details[open] summary{ color:var(--blue-bright); }
.faq details p{ color:var(--muted); margin:0 0 14px; }

/* CTA band */
.cta-band{ margin:36px 0 8px; background:linear-gradient(135deg,#0e1730,#0a0c10); border:1px solid var(--line); border-radius:18px; padding:34px; text-align:center; }
.cta-band h2{ margin-bottom:8px; }
.cta-band p{ color:var(--muted); max-width:620px; margin:0 auto 20px; }

/* Footer */
footer.site{ border-top:1px solid var(--line); padding:34px 0; color:var(--dim); font-size:14px; margin-top:30px; }
.foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
footer.site a{ color:var(--dim); text-decoration:none; } footer.site a:hover{ color:var(--white); }
.foot-brand b{ color:var(--white); }
.foot-links{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-bottom{ max-width:var(--maxw); margin:22px auto 0; padding:16px 22px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; }