/* Shared styles for the service pages. Matches the homepage (navy #1F3864, amber, Inter + Lora). */
html{font-size:18px; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
:root{
  --navy:#1F3864; --navy-dark:#15264a; --amber:#AD5E2A; --amber-dark:#8F4A20;
  --ink:#1A1A1A; --ink-soft:#3d4451; --line:#DFDAD3;
  --bg:#FFFFFF; --bg-warm:#F7F5F2; --bg-tint:#EEF2F8;
  --radius:10px; --maxw:1120px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:1rem; line-height:1.65; -webkit-text-size-adjust:100%}
h1,h2,h3{font-family:'Lora',Georgia,'Times New Roman',serif; color:var(--navy)}
h1{font-size:clamp(1.8rem,4vw,2.4rem); line-height:1.16; letter-spacing:-.02em; margin:0 0 .5em}
h2{font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.22; margin:0 0 .6em}
h3{font-size:1.1rem; margin:0 0 .4em}
p{margin:0 0 1.1em; max-width:66ch}
a{color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px}
a:hover{color:var(--amber-dark)}
a:focus-visible{outline:4px solid var(--amber); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:14px 20px; z-index:100}
.skip:focus{left:0}

header{background:#fff; border-bottom:2px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:12px 18px; padding:12px 24px;
  max-width:var(--maxw); margin:0 auto; flex-wrap:wrap}
.logo{font-weight:700; font-size:1.05rem; color:var(--navy); text-decoration:none; display:flex;
  align-items:center; gap:11px; min-height:48px; line-height:1.2}
.logo img{border-radius:9px}
.callnum{font-size:1.1rem; font-weight:700; color:var(--navy); text-decoration:none; white-space:nowrap;
  display:inline-flex; flex-direction:column; justify-content:center; min-height:48px}
.callnum small{font-size:.8rem; font-weight:600; color:var(--ink-soft)}
.subnav{border-top:1px solid var(--line)}
.subnav ul{list-style:none; margin:0 auto; padding:0 16px; max-width:var(--maxw); display:flex;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.subnav a{display:inline-flex; align-items:center; min-height:48px; padding:6px 14px; font-size:.95rem;
  font-weight:600; color:var(--navy); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap}
.subnav a:hover{border-bottom-color:var(--amber)}
.subnav a[aria-current="page"]{border-bottom-color:var(--navy)}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:14px 26px;
  border-radius:var(--radius); border:2px solid transparent; font-size:1rem; font-weight:700; text-decoration:none}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-dark); color:#fff}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--navy)}
.btn-ghost:hover{background:var(--bg-tint); color:var(--navy)}

.hero{background:var(--bg-warm); border-bottom:2px solid var(--line); padding:44px 0 36px}
.hero .lede{font-size:1.1rem; color:var(--ink-soft)}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
.kicker{font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-dark); margin:0 0 10px}
.crumbs{font-size:.9rem; margin:0 0 14px}
section{padding:46px 0}
section.tint{background:var(--bg-tint)}
section.warm{background:var(--bg-warm); border-top:2px solid var(--line); border-bottom:2px solid var(--line)}
.note{font-size:.9rem; color:var(--ink-soft); margin-top:20px}

.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:24px}
.card{background:#fff; border:2px solid var(--line); border-radius:var(--radius); padding:24px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card.link{display:block; text-decoration:none; color:var(--ink)}
.card.link:hover{border-color:var(--navy)}
.card.link h2{font-size:1.2rem; margin-bottom:.3em}
.card.link p{color:var(--ink-soft); font-size:.95rem}

ul.ticks,ul.crosses{list-style:none; padding:0; margin:0 0 1em}
ul.ticks li,ul.crosses li{position:relative; padding-left:32px; margin-bottom:12px; line-height:1.5}
ul.ticks li::before{content:"\2713"; position:absolute; left:0; color:#2f7a4f; font-weight:800}
ul.crosses li::before{content:"\2715"; position:absolute; left:0; color:#9e3535; font-weight:800}

ol.steps{counter-reset:s; list-style:none; padding:0; margin:20px 0 0; display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
ol.steps li{counter-increment:s; position:relative; padding-left:58px}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:-4px; width:44px; height:44px;
  background:var(--navy); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700}
ol.steps p{color:var(--ink-soft); font-size:.95rem; margin:0}

.ask{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:20px}
.ask .card h3{margin-bottom:.3em}
.soon{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--bg-warm); color:var(--amber-dark); border:1px solid var(--line); border-radius:99px; padding:2px 10px; margin-left:6px; vertical-align:middle}
.example{background:#fff; border:2px solid var(--line); border-left:8px solid var(--navy); border-radius:var(--radius);
  padding:20px 22px; margin-top:22px}
.example p:last-child{margin-bottom:0}
.fees{background:#fff; border:2px solid var(--line); border-left:8px solid var(--amber); border-radius:var(--radius); padding:22px}
.fees p:last-child{margin-bottom:0}

footer{background:var(--navy); color:#dfe6f2; padding:44px 0 28px; font-size:.95rem}
footer h3{color:#fff; font-size:1rem; margin-bottom:12px}
footer a{color:#fff}
.fgrid{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer ul{list-style:none; padding:0; margin:0}
footer li a{display:inline-flex; align-items:center; min-height:44px}
.legal{border-top:1px solid rgba(255,255,255,.22); margin-top:30px; padding-top:18px; font-size:.85rem; color:#c3cee2}
.legal p{max-width:none}

@media(max-width:700px){
  .bar{padding:10px 16px}
  .logo{font-size:.95rem}
  .wrap{padding:0 16px}
  .hero{padding:30px 0 28px}
  section{padding:36px 0}
  .btn{width:100%}
}