/* ==========================================================================
   Service page hero - birthcertificatenamechange.com
   The article carries .bcnc-guide as well as .bcnc-svc, so the design tokens
   and every body-content style come from guide.css. This file only adds the
   hero, the route checker, and the Fluent Form inside it.
   ========================================================================== */

.bcnc-svc [hidden]{display:none !important}

/* ---------------------------------------------------------------- hero */
.bcnc-svc .svc-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg,#EEF4FC 0%,var(--surf) 46%,#FFFFFF 100%);
  border-bottom:1px solid var(--bd-soft);
  padding:clamp(28px,3.8vw,52px) 0 clamp(32px,3.8vw,56px);
  margin-bottom:clamp(28px,3.5vw,44px);
}
.bcnc-svc .svc-hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:7%; right:3%; width:170px; height:120px;
  background-image:radial-gradient(circle,#BCD3ED 1.6px,transparent 1.7px);
  background-size:19px 19px; opacity:.55;
}
.bcnc-svc .svc-hero::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:-6%; top:-20%; width:58%; height:140%;
  background:radial-gradient(closest-side,rgba(20,83,154,.10),rgba(20,83,154,0) 76%);
}
.bcnc-svc .svc-hero-in{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,32px);
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  grid-template-areas:"intro chk" "details chk";
  column-gap:clamp(28px,4.5vw,64px); row-gap:0;
  align-items:start;
}
.bcnc-svc .svc-intro{grid-area:intro; min-width:0}
.bcnc-svc .svc-details{grid-area:details; min-width:0}

.bcnc-svc .svc-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin:0 0 16px; font-family:var(--sans); font-size:13px; color:var(--muted);
}
.bcnc-svc .svc-crumb a{color:var(--muted); text-decoration:none}
.bcnc-svc .svc-crumb a:hover{color:var(--blue-mid); text-decoration:underline}
.bcnc-svc .svc-crumb .sep{color:var(--bd-strong)}
.bcnc-svc .svc-crumb .cur{color:var(--nv); font-weight:600}

.bcnc-svc .svc-badge{
  display:inline-flex; align-items:center; gap:7px;
  margin:0 0 16px; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--tint-blue); border:1px solid #D5E5F7; color:var(--blue-mid);
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.bcnc-svc .svc-badge svg{width:14px; height:14px; flex:0 0 auto}

.bcnc-svc .svc-title{
  margin:0; font-family:var(--sans);
  font-size:clamp(30px,4.2vw,50px); font-weight:700; line-height:1.05; letter-spacing:-.028em;
  color:var(--nv); text-wrap:balance;
}
.bcnc-svc .svc-title .ac{color:var(--blue-mid)}
.bcnc-svc .svc-tagline{
  margin:14px 0 0; font-family:var(--sans);
  font-size:clamp(17px,1.7vw,20px); font-weight:600; line-height:1.35; letter-spacing:-.01em;
  color:var(--nv); text-wrap:balance;
}
.bcnc-svc .svc-dek{
  margin:12px 0 0; max-width:54ch; font-family:var(--serif);
  font-size:clamp(16px,1.45vw,17.5px); line-height:1.62; color:var(--muted);
}

/* trust points - fixed-size circles, icons centred by grid */
.bcnc-svc .svc-feats{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
}
.bcnc-svc .svc-feats li{
  display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:11px;
  align-items:start; margin:0; padding:0; min-width:0;
}
.bcnc-svc .svc-feats .fi{
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--bd-strong); color:var(--blue-mid);
  display:grid; place-items:center;
}
.bcnc-svc .svc-feats .fi svg{width:18px; height:18px; display:block}
.bcnc-svc .svc-feats b{display:block; padding-top:1px; font-family:var(--sans); font-size:13.5px; line-height:1.3; color:var(--nv)}
.bcnc-svc .svc-feats .sub{display:block; margin-top:2px; font-family:var(--sans); font-size:12.5px; line-height:1.35; color:var(--muted)}

.bcnc-svc .svc-cta{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.bcnc-svc .svc-cta li{margin:0; padding:0}
.bcnc-svc .svc-cta a{
  display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 10px; border-radius:var(--r-md);
  border:1px solid var(--bd-strong); background:#fff; text-decoration:none;
  font-family:var(--sans);
  transition:box-shadow .15s ease, transform .15s ease;
}
.bcnc-svc .svc-cta a:hover{box-shadow:0 8px 22px rgba(10,35,64,.12); transform:translateY(-1px)}
.bcnc-svc .svc-cta a:focus-visible{outline:2px solid var(--blue-mid); outline-offset:2px}
.bcnc-svc .svc-cta .ico{width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center}
.bcnc-svc .svc-cta .ico svg{width:17px; height:17px; display:block}
.bcnc-svc .svc-cta .t{display:block; font-size:14px; font-weight:700; line-height:1.2; color:var(--nv); white-space:nowrap}
.bcnc-svc .svc-cta .s{display:block; font-size:12px; line-height:1.3; color:var(--muted); white-space:nowrap}
.bcnc-svc .svc-cta .is-call{background:var(--blue-mid); border-color:var(--blue-mid)}
.bcnc-svc .svc-cta .is-call .ico{background:rgba(255,255,255,.18); color:#fff}
.bcnc-svc .svc-cta .is-call .t,
.bcnc-svc .svc-cta .is-call .s{color:#fff}
.bcnc-svc .svc-cta .is-wa .ico{background:var(--tint-grn); color:var(--grn-dk)}

.bcnc-svc .svc-auth{
  margin:20px 0 0; padding:0;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  border:1px solid var(--bd); border-radius:var(--r-md); background:rgba(255,255,255,.78); overflow:hidden;
}
.bcnc-svc .svc-auth.is-single{grid-template-columns:minmax(0,1fr)}
.bcnc-svc .svc-auth > div{padding:11px 14px; min-width:0}
.bcnc-svc .svc-auth > div + div{border-left:1px solid var(--bd)}
.bcnc-svc .svc-auth dt{margin:0; font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.bcnc-svc .svc-auth dd{margin:3px 0 0; font-family:var(--sans); font-size:13.5px; font-weight:600; line-height:1.35; color:var(--nv)}

/* ------------------------------------------------------- route checker */
.bcnc-svc .svc-chk{
  grid-area:chk; align-self:center; justify-self:end;
  width:100%; max-width:470px;
  background:#fff; border:1px solid var(--bd); border-radius:18px; overflow:hidden;
  box-shadow:0 2px 4px rgba(10,35,64,.05),0 26px 56px rgba(10,35,64,.13);
  font-family:var(--sans); color:var(--text);
}
.bcnc-svc .svc-chk-head{padding:18px 22px 16px; border-bottom:1px solid var(--bd-soft); background:linear-gradient(180deg,#FBFCFE,#fff)}
.bcnc-svc .svc-chk-eyebrow{
  display:flex; align-items:center; gap:7px; margin:0;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grn-dk);
}
.bcnc-svc .svc-chk-eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--grn); box-shadow:0 0 0 3px rgba(15,138,95,.16)}
.bcnc-svc .svc-chk-title{margin:8px 0 0; font-size:20px; font-weight:700; line-height:1.2; letter-spacing:-.015em; color:var(--nv); text-wrap:balance}
.bcnc-svc .svc-chk-title .ac{color:var(--blue-mid)}
.bcnc-svc .svc-chk-sub{margin:4px 0 0; font-size:13.5px; color:var(--muted)}
.bcnc-svc .svc-prog{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px}
.bcnc-svc .svc-prog i{height:4px; border-radius:2px; background:var(--bd-soft); transition:background-color .25s ease}
.bcnc-svc .svc-prog i.on{background:var(--blue-mid)}
.bcnc-svc .svc-prog i.done{background:var(--grn)}

.bcnc-svc .svc-chk-body{padding:18px 22px 20px}
.bcnc-svc .svc-noscript{margin:0; font-size:14.5px; line-height:1.55}
.bcnc-svc .svc-step-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px}
.bcnc-svc .svc-step-n{font-size:12px; font-weight:600; color:var(--faint)}
.bcnc-svc .svc-q{margin:0 0 12px; font-size:16.5px; font-weight:700; line-height:1.3; color:var(--nv)}
.bcnc-svc .svc-q:focus{outline:none}

/* Astra styles every <button> globally, so each property is set explicitly and
   repeated for :hover/:focus/:active, which Astra also targets. */
.bcnc-svc .svc-chk button.svc-back,
.bcnc-svc .svc-chk button.svc-back:hover,
.bcnc-svc .svc-chk button.svc-back:focus,
.bcnc-svc .svc-chk button.svc-back:active,
.bcnc-svc .svc-chk button.svc-again,
.bcnc-svc .svc-chk button.svc-again:hover,
.bcnc-svc .svc-chk button.svc-again:focus,
.bcnc-svc .svc-chk button.svc-again:active{
  display:inline-flex; align-items:center; gap:4px;
  margin:0; padding:4px 6px; border:0; border-radius:6px; box-shadow:none;
  background:transparent; color:var(--blue-mid);
  font-family:var(--sans); font-size:13px; font-weight:600; line-height:1.3;
  letter-spacing:0; text-transform:none; cursor:pointer;
}
.bcnc-svc .svc-chk button.svc-back{margin:-4px -6px}
.bcnc-svc .svc-chk button.svc-again{margin-top:12px; font-size:13.5px}
.bcnc-svc .svc-chk button.svc-back:hover,
.bcnc-svc .svc-chk button.svc-again:hover{text-decoration:underline}
.bcnc-svc .svc-chk button.svc-back:focus-visible,
.bcnc-svc .svc-chk button.svc-again:focus-visible{outline:2px solid var(--blue-mid); outline-offset:1px}
.bcnc-svc .svc-chk button.svc-back svg{width:14px; height:14px}

.bcnc-svc .svc-opts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.bcnc-svc .svc-opts li{margin:0; padding:0}
.bcnc-svc .svc-chk button.svc-opt,
.bcnc-svc .svc-chk button.svc-opt:hover,
.bcnc-svc .svc-chk button.svc-opt:focus,
.bcnc-svc .svc-chk button.svc-opt:active{
  display:grid; grid-template-columns:20px minmax(0,1fr) 16px; align-items:center; column-gap:12px;
  width:100%; margin:0; padding:11px 14px; text-align:left;
  background:#fff; color:var(--nv); border:1px solid var(--bd); border-radius:var(--r-md); box-shadow:none;
  font-family:var(--sans); font-size:14.5px; font-weight:400; line-height:1.3; letter-spacing:0; text-transform:none;
  cursor:pointer; transition:border-color .15s ease, background-color .15s ease;
}
.bcnc-svc .svc-chk button.svc-opt:hover{border-color:var(--bd-strong); background:var(--surf)}
.bcnc-svc .svc-chk button.svc-opt:focus-visible{outline:2px solid var(--blue-mid); outline-offset:2px}
.bcnc-svc .svc-chk button.svc-opt[aria-pressed="true"]{border-color:var(--blue-mid); background:var(--tint-blue); box-shadow:inset 0 0 0 1px var(--blue-mid)}
.bcnc-svc .svc-opt .dot{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--bd-strong); background:#fff; display:grid; place-items:center}
.bcnc-svc .svc-opt .dot::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--blue-mid); transform:scale(0); transition:transform .15s ease}
.bcnc-svc .svc-opt[aria-pressed="true"] .dot{border-color:var(--blue-mid)}
.bcnc-svc .svc-opt[aria-pressed="true"] .dot::after{transform:scale(1)}
.bcnc-svc .svc-opt b{display:block; font-size:14.5px; font-weight:600; line-height:1.3; color:var(--nv)}
.bcnc-svc .svc-opt small{display:block; margin-top:1px; font-size:12.5px; line-height:1.35; color:var(--muted)}
.bcnc-svc .svc-opt .chev{width:16px; height:16px; color:var(--faint)}

.bcnc-svc .svc-route{padding:14px 16px; border:1px solid #D5E5F7; border-radius:var(--r-md); background:var(--tint-blue)}
.bcnc-svc .svc-route .k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-mid)}
.bcnc-svc .svc-route h4{margin:3px 0 0; font-family:var(--sans); font-size:17px; font-weight:700; line-height:1.25; color:var(--nv)}
.bcnc-svc .svc-route p{margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--text)}
.bcnc-svc .svc-fact{
  display:grid; grid-template-columns:16px minmax(0,1fr); column-gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px solid #D5E5F7;
  font-size:13px; font-weight:600; line-height:1.45; color:var(--nv);
}
.bcnc-svc .svc-fact svg{width:16px; height:16px; margin-top:1px; color:var(--grn-dk)}
.bcnc-svc .svc-note{margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted)}
.bcnc-svc .svc-form-slot{margin-top:14px}
.bcnc-svc .svc-wa-alt{
  display:flex; align-items:center; justify-content:center; gap:7px; margin:12px 0 0;
  font-size:13px; font-weight:600; color:var(--grn-dk); text-decoration:none;
}
.bcnc-svc .svc-wa-alt:hover{text-decoration:underline}
.bcnc-svc .svc-wa-alt svg{width:15px; height:15px}
.bcnc-svc .svc-wa-main{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
  height:48px; border-radius:11px; background:var(--grn-dk); color:#fff;
  font-size:15px; font-weight:700; text-decoration:none;
}
.bcnc-svc .svc-wa-main:hover{background:var(--grn)}
.bcnc-svc .svc-wa-main svg{width:17px; height:17px}
.bcnc-svc .svc-privacy{display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 0; font-size:12px; color:var(--faint)}
.bcnc-svc .svc-privacy svg{width:13px; height:13px}

.bcnc-svc .svc-done{text-align:center; padding:10px 4px 4px}
.bcnc-svc .svc-done .tick{width:52px; height:52px; margin:0 auto 12px; border-radius:50%; background:var(--tint-grn); color:var(--grn-dk); display:grid; place-items:center}
.bcnc-svc .svc-done .tick svg{width:24px; height:24px}
.bcnc-svc .svc-done h3{margin:0; font-family:var(--sans); font-size:18px; font-weight:700; color:var(--nv)}
.bcnc-svc .svc-done h3:focus{outline:none}
.bcnc-svc .svc-done p{margin:6px auto 0; max-width:34ch; font-size:14px; line-height:1.55; color:var(--text)}
.bcnc-svc .svc-done .sum{margin:14px 0 0; padding:10px 12px; border:1px solid var(--bd); border-radius:10px; background:var(--surf); text-align:left; font-size:12.5px; line-height:1.5; color:var(--muted)}
.bcnc-svc .svc-done .sum b{color:var(--nv); font-weight:600}

/* -------------------------------------- Fluent Form inside the checker
   Fluent Forms nests fields in a <fieldset> and its own rules reach (0,3,1),
   so every rule here is scoped through .svc-chk to out-rank them. */
.bcnc-svc .svc-chk .fluentform{margin:0}
.bcnc-svc .svc-chk .frm-fluent-form{display:block; margin:0}
.bcnc-svc .svc-chk .frm-fluent-form > fieldset{
  display:flex; flex-direction:column; gap:10px;
  border:0; margin:0; padding:0; min-width:0;
}
.bcnc-svc .svc-chk .ff-hpsf-container{display:none !important}
.bcnc-svc .svc-chk .fluentform .ff-el-group{margin:0; padding:0}
.bcnc-svc .svc-chk .fluentform .ff-el-input--label{margin:0 0 5px; padding:0}
.bcnc-svc .svc-chk .fluentform .ff-el-input--label label{
  display:block; margin:0; font-family:var(--sans); font-size:12.5px; font-weight:600; line-height:1.3; color:var(--nv);
}
.bcnc-svc .svc-chk .fluentform .ff-el-is-required.asterisk-right label:after{color:#B4423C; margin-left:3px}
.bcnc-svc .svc-chk .fluentform .ff-el-form-control{
  width:100%; height:46px; margin:0; padding:0 13px;
  border:1px solid var(--bd-strong); border-radius:10px; background:#fff; color:var(--nv);
  font-family:var(--sans); font-size:15px; line-height:1.4; box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.bcnc-svc .svc-chk .fluentform textarea.ff-el-form-control{height:auto; min-height:78px; padding:10px 13px; resize:vertical; line-height:1.45}
.bcnc-svc .svc-chk .fluentform .ff-el-form-control::placeholder{color:#A3AFBF; opacity:1}
.bcnc-svc .svc-chk .fluentform .ff-el-form-control:focus{border-color:var(--blue-mid); outline:0; box-shadow:0 0 0 3px rgba(20,83,154,.16)}
.bcnc-svc .svc-chk .fluentform .ff-el-form-control[aria-invalid="true"]{border-color:#B42318}

/* +91 prefix, added around the mobile input by service.js */
.bcnc-svc .svc-chk .svc-tel{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:stretch}
.bcnc-svc .svc-chk .svc-tel > span{
  display:grid; place-items:center; padding:0 12px;
  border:1px solid var(--bd-strong); border-right:0; border-radius:10px 0 0 10px;
  background:var(--surf); font-size:14px; font-weight:600; color:var(--body);
}
.bcnc-svc .svc-chk .svc-tel .ff-el-form-control{border-radius:0 10px 10px 0}
.bcnc-svc .svc-chk .svc-tel > :not(span):not(input){grid-column:1 / -1}

.bcnc-svc .svc-chk .svc-err,
.bcnc-svc .svc-chk .fluentform .error,
.bcnc-svc .svc-chk .fluentform .text-danger{display:block; margin:5px 0 0; font-size:12.5px; line-height:1.4; color:#B42318}

.bcnc-svc .svc-chk .fluentform .ff_submit_btn_wrapper{display:block; margin:2px 0 0; padding:0}
.bcnc-svc .svc-chk .fluentform .ff-btn-submit:not(.ff_btn_no_style),
.bcnc-svc .svc-chk .fluentform .ff_submit_btn_wrapper button:not(.ff_btn_no_style){
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:48px; margin:0; padding:0 18px;
  border:0; border-radius:11px; background:var(--nv); color:#fff; box-shadow:none;
  font-family:var(--sans); font-size:15px; font-weight:700; line-height:1; letter-spacing:0; text-transform:none;
  cursor:pointer; transition:background-color .15s ease;
}
.bcnc-svc .svc-chk .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover,
.bcnc-svc .svc-chk .fluentform .ff-btn-submit:not(.ff_btn_no_style):focus{background:var(--blue-mid); color:#fff}
.bcnc-svc .svc-chk .fluentform .ff-btn-submit:focus-visible{outline:2px solid var(--blue-mid); outline-offset:2px}
/* service.js shows its own confirmation panel */
.bcnc-svc .svc-chk .ff-message-success{display:none !important}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .bcnc-svc .svc-hero-in{grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "chk" "details"; row-gap:24px}
  .bcnc-svc .svc-chk{justify-self:stretch; max-width:none}
}
@media (max-width:560px){
  .bcnc-svc .svc-feats{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:0}
  .bcnc-svc .svc-cta{flex-direction:column}
  .bcnc-svc .svc-cta a{width:100%}
  .bcnc-svc .svc-auth{grid-template-columns:minmax(0,1fr)}
  .bcnc-svc .svc-auth > div + div{border-left:0; border-top:1px solid var(--bd)}
  .bcnc-svc .svc-chk-head,
  .bcnc-svc .svc-chk-body{padding-left:16px; padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .bcnc-svc .svc-hero *,
  .bcnc-svc .svc-hero *::after{transition:none !important}
}

/* ------------------------------------------- layout & rhythm (2026-09-19)
   Astra pads the article (2em top, 20px sides). The body grid already has its
   own 20px gutters and the hero has its own inner padding, so the article
   padding only doubled them (text sat 40px in on phones). Zero it here; the
   (0,4,1) selector is needed to beat Astra's (0,3,1) rule.
   Grid items do not collapse margins, so a heading's top margin adds to the
   previous block's 18-22px bottom margin; the values below allow for that.
   Section rhythm: no rule line above every H2 - whitespace alone separates
   sections, and the gaps are tightened to match. Scoped to service pages;
   guide posts keep their own rhythm. */
.ast-page-builder-template .site-main > article.bcnc-svc.ast-article-single,
article.bcnc-svc.ast-article-single{padding:0}
.bcnc-svc .svc-hero{margin:0 0 32px}
.bcnc-guide.bcnc-svc .bcnc-body{padding-bottom:48px}
.bcnc-guide.bcnc-svc .bcnc-body h2{margin:26px 0 12px; padding-top:0; border-top:0}
.bcnc-guide.bcnc-svc .bcnc-body h3{margin:10px 0 8px}
.bcnc-guide.bcnc-svc .bcnc-body > :first-child{margin-top:0}
.bcnc-guide.bcnc-svc .answer-box,
.bcnc-guide.bcnc-svc .bcnc-body > #rank-math-faq{margin-bottom:18px}
.bcnc-guide.bcnc-svc .wp-block-table{margin-bottom:22px}
.bcnc-guide.bcnc-svc .bcnc-body ul,
.bcnc-guide.bcnc-svc .bcnc-body ol{margin-bottom:18px}
.bcnc-guide.bcnc-svc .bcnc-disclosure{margin-top:32px}
@media (max-width:700px){
  .bcnc-svc .svc-hero{margin-bottom:24px}
  .bcnc-guide.bcnc-svc .bcnc-body h2{margin-top:18px}
  .bcnc-guide.bcnc-svc .bcnc-body h3{margin-top:6px}
  .bcnc-guide.bcnc-svc .bcnc-body{padding-bottom:36px}
  .bcnc-guide.bcnc-svc .bcnc-disclosure{margin-top:24px}
}

/* ------------------------------------------------ byline + updated date */
.bcnc-svc .svc-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:14px 0 0;
  font-family:var(--sans); font-size:13px; line-height:1.45; color:var(--muted);
}
.bcnc-svc .svc-meta svg{width:16px; height:16px; flex:0 0 auto; color:var(--grn-dk)}
.bcnc-svc .svc-meta a{color:var(--nv); font-weight:600; text-decoration:underline; text-decoration-color:var(--bd-strong); text-underline-offset:3px}
.bcnc-svc .svc-meta a:hover{color:var(--blue-mid); text-decoration-color:currentColor}
.bcnc-svc .svc-meta-sep{color:var(--faint)}

/* ------------------------------------------- help box before the FAQ */
.bcnc-guide.bcnc-svc .bcnc-body .svc-help{
  margin:22px 0 18px; padding:26px 26px 24px; border-radius:16px;
  background:linear-gradient(150deg,#0E3B72 0%,#0A2340 72%); color:#fff;
  box-shadow:0 18px 40px rgba(10,35,64,.16);
}
.bcnc-guide.bcnc-svc .bcnc-body .svc-help-eyebrow{
  display:flex; align-items:center; gap:7px; margin:0;
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8FE0BF;
}
.bcnc-guide.bcnc-svc .bcnc-body .svc-help-eyebrow i{width:7px; height:7px; border-radius:50%; background:#35C48D; box-shadow:0 0 0 3px rgba(53,196,141,.22)}
.bcnc-guide.bcnc-svc .bcnc-body h2.svc-help-title{
  margin:10px 0 0; padding:0; border:0;
  font-family:var(--sans); font-size:clamp(21px,2.3vw,25px); line-height:1.2; letter-spacing:-.015em; color:#fff; text-wrap:balance;
}
.bcnc-guide.bcnc-svc .bcnc-body p.svc-help-sub{margin:8px 0 0; font-family:var(--sans); font-size:15px; line-height:1.6; color:#C9D8EA}
.bcnc-guide.bcnc-svc .bcnc-body .svc-help-act{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 16px; border-radius:11px; border:1px solid transparent;
  font-family:var(--sans); font-size:15px; font-weight:700; line-height:1; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn svg{width:18px; height:18px; flex:0 0 auto}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn.is-route{background:#fff; color:#0A2340}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn.is-route:hover{background:#EAF2FB}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn.is-wa{background:#0F8A5F; color:#fff}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn.is-wa:hover{background:#0B6F4C}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn.is-call{background:transparent; color:#fff; border-color:rgba(255,255,255,.34)}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn.is-call:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn:focus-visible{outline:2px solid #8FE0BF; outline-offset:2px}
@media (max-width:560px){
  .bcnc-guide.bcnc-svc .bcnc-body .svc-help{padding:22px 18px 20px}
  .bcnc-guide.bcnc-svc .bcnc-body .svc-help-act{flex-direction:column}
  .bcnc-guide.bcnc-svc .bcnc-body a.svc-help-btn{width:100%}
}

/* ----------------------- sticky contact bar (phones and tablets, <1100px)
   Sits outside the article, so it cannot use the --tokens scoped to
   .bcnc-guide; colours and font are written out. Hidden while the route
   checker or the help box is on screen, and while someone is typing. */
.svc-bar{display:none}
@media (max-width:1099px){
  .svc-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97); border-top:1px solid #E4EAF2;
    box-shadow:0 -6px 20px rgba(10,35,64,.08);
    transition:transform .25s ease, visibility .25s;
  }
  .svc-bar.is-hidden,
  .svc-bar.is-typing{transform:translateY(110%); visibility:hidden}
  .svc-bar-btn{
    display:flex; align-items:center; justify-content:center; gap:7px; min-width:0;
    height:46px; padding:0 8px; border-radius:11px; border:1px solid transparent;
    font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:14.5px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap;
  }
  .svc-bar-btn svg{width:18px; height:18px; flex:0 0 auto}
  .svc-bar-btn.is-call,.svc-bar-btn.is-call:visited{background:#14539A; color:#fff}
  .svc-bar-btn.is-wa,.svc-bar-btn.is-wa:visited{background:#0F8A5F; color:#fff}
  .svc-bar-btn.is-route,.svc-bar-btn.is-route:visited{background:#EAF2FB; color:#14539A; border-color:#D5E5F7}
  body.bcnc-service{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  body.bcnc-service #ast-scroll-top{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* the bar replaces the hero's Call / WhatsApp buttons on phones */
  .bcnc-svc .svc-cta{display:none}
}
@media (prefers-reduced-motion:reduce){.svc-bar{transition:none}}

/* ---------------------------------------------- compact hero on phones */
@media (max-width:560px){
  .bcnc-svc .svc-hero{padding:20px 0 24px}
  .bcnc-svc .svc-crumb{margin-bottom:12px}
  .bcnc-svc .svc-badge{display:none}
  .bcnc-svc .svc-tagline{margin-top:10px; font-size:17px}
  .bcnc-svc .svc-dek{margin-top:10px; font-size:15.5px; line-height:1.55}
  .bcnc-svc .svc-meta{margin-top:12px; font-size:12.5px}
  .bcnc-svc .svc-hero-in{row-gap:18px}
  /* trust points become three compact tiles: icon over label, no sub-line */
  .bcnc-svc .svc-feats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0}
  .bcnc-svc .svc-feats li{grid-template-columns:minmax(0,1fr); justify-items:center; row-gap:6px; text-align:center}
  .bcnc-svc .svc-feats .fi{width:34px; height:34px}
  .bcnc-svc .svc-feats b{padding:0; font-size:12.5px}
  .bcnc-svc .svc-feats .sub{display:none}
  .bcnc-svc .svc-auth{margin-top:16px}
  .bcnc-svc .svc-auth > div{padding:9px 12px}
}

/* ------------------------------------------- desktop sidebar (>=1100px)
   The body column and the sidebar share the hero's 1180px container, so the
   article text now lines up with the hero instead of floating in the middle.
   Below 1100px the sidebar is not shown: phones have the help box and the
   contact bar instead. */
.bcnc-svc .svc-side{display:none}
@media (min-width:1100px){
  .bcnc-svc .svc-layout{
    display:grid; grid-template-columns:minmax(0,1fr) 340px; column-gap:56px; align-items:start;
    max-width:1180px; margin:0 auto; padding:0 32px;
  }
  .bcnc-guide.bcnc-svc .svc-layout > .bcnc-body{
    grid-template-columns:[full-start] 0 [wide-start] 0 [text-start] minmax(0,1fr) [text-end] 0 [wide-end] 0 [full-end];
  }
  .bcnc-svc .svc-side{display:block; padding-bottom:48px}
}
@media (min-width:1100px) and (min-height:720px){
  .bcnc-svc .svc-side{position:sticky; top:24px}
  .admin-bar .bcnc-svc .svc-side{top:56px}
}
.bcnc-svc .svc-side-card{
  background:#fff; border:1px solid var(--bd); border-top:3px solid var(--grn); border-radius:16px;
  padding:22px 22px 18px; box-shadow:0 2px 4px rgba(10,35,64,.04),0 18px 40px rgba(10,35,64,.10);
  font-family:var(--sans); color:var(--text);
}
.bcnc-svc .svc-side-eyebrow{
  display:flex; align-items:center; gap:7px; margin:0;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grn-dk);
}
.bcnc-svc .svc-side-eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--grn); box-shadow:0 0 0 3px rgba(15,138,95,.16)}
.bcnc-guide.bcnc-svc h2.svc-side-title{
  margin:10px 0 0; padding:0; border:0;
  font-family:var(--sans); font-size:20px; font-weight:700; line-height:1.25; letter-spacing:-.015em; color:var(--nv); text-wrap:balance;
}
.bcnc-svc .svc-side-title .ac{color:var(--blue-mid)}
.bcnc-svc .svc-side-sub{margin:8px 0 16px; font-size:14px; line-height:1.55; color:var(--muted)}
.bcnc-svc .svc-side-privacy{display:flex; align-items:flex-start; gap:7px; margin:12px 0 0; font-size:12px; line-height:1.45; color:var(--faint)}
.bcnc-svc .svc-side-privacy svg{width:14px; height:14px; flex:0 0 auto; margin-top:1px}
.bcnc-svc .svc-side-privacy a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.bcnc-svc .svc-side-alt{display:grid; grid-template-columns:1.25fr 1fr; gap:8px; margin-top:12px}
.bcnc-svc .svc-side-alt a{
  display:flex; align-items:center; justify-content:center; gap:7px; height:44px; border-radius:11px;
  border:1px solid var(--bd-strong); background:#fff; color:var(--nv);
  font-family:var(--sans); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease;
}
.bcnc-svc .svc-side-alt a svg{width:17px; height:17px; flex:0 0 auto}
.bcnc-svc .svc-side-alt a.is-call svg{color:var(--blue-mid)}
.bcnc-svc .svc-side-alt a.is-wa svg{color:var(--grn-dk)}
.bcnc-svc .svc-side-alt a:hover{border-color:var(--blue-mid); background:var(--surf)}

/* Fluent Form inside the sidebar - scoped through .svc-side to out-rank
   Fluent's own (0,3,1) rules, as in the route checker. */
.bcnc-svc .svc-side .fluentform{margin:0}
.bcnc-svc .svc-side .frm-fluent-form{display:block; margin:0}
.bcnc-svc .svc-side .frm-fluent-form > fieldset{display:flex; flex-direction:column; gap:12px; border:0; margin:0; padding:0; min-width:0}
.bcnc-svc .svc-side .fluentform .ff-el-group{margin:0; padding:0}
.bcnc-svc .svc-side .fluentform .ff-el-input--label{margin:0 0 5px; padding:0}
.bcnc-svc .svc-side .fluentform .ff-el-input--label label{display:block; margin:0; font-family:var(--sans); font-size:12.5px; font-weight:600; line-height:1.3; color:var(--nv)}
.bcnc-svc .svc-side .fluentform .ff-el-is-required.asterisk-right label:after{color:#B4423C; margin-left:3px}
.bcnc-svc .svc-side .fluentform .ff-el-form-control{
  width:100%; height:46px; margin:0; padding:0 13px;
  border:1px solid var(--bd-strong); border-radius:10px; background:#fff; color:var(--nv);
  font-family:var(--sans); font-size:15px; line-height:1.4; box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.bcnc-svc .svc-side .fluentform select.ff-el-form-control{
  padding-right:36px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
}
.bcnc-svc .svc-side .fluentform .ff-el-form-control:focus{border-color:var(--blue-mid); box-shadow:0 0 0 3px rgba(20,83,154,.14); outline:0}
.bcnc-svc .svc-side .fluentform .ff-el-form-control::placeholder{color:var(--faint)}
.bcnc-svc .svc-side .fluentform .ff_input-group{display:flex; flex-wrap:nowrap; align-items:stretch}
.bcnc-svc .svc-side .fluentform .ff_input-group-prepend{display:flex; margin:0}
.bcnc-svc .svc-side .fluentform .ff_input-group-text{
  display:grid; place-items:center; height:46px; padding:0 12px; margin:0;
  border:1px solid var(--bd-strong); border-right:0; border-radius:10px 0 0 10px;
  background:var(--surf); font-family:var(--sans); font-size:14px; font-weight:600; color:var(--body);
}
.bcnc-svc .svc-side .fluentform .ff_input-group .ff-el-form-control{flex:1 1 auto; min-width:0; border-radius:0 10px 10px 0}
.bcnc-svc .svc-side .svc-err,
.bcnc-svc .svc-side .fluentform .error,
.bcnc-svc .svc-side .fluentform .text-danger{display:block; margin:5px 0 0; font-family:var(--sans); font-size:12.5px; line-height:1.4; color:#B42318}
.bcnc-svc .svc-side .fluentform .ff-el-is-error .ff-el-form-control{border-color:#D92D20}
.bcnc-svc .svc-side .fluentform .ff_submit_btn_wrapper{display:block; margin:4px 0 0; padding:0}
.bcnc-svc .svc-side .fluentform .ff-btn-submit:not(.ff_btn_no_style),
.bcnc-svc .svc-side .fluentform .ff_submit_btn_wrapper button:not(.ff_btn_no_style){
  display:flex; align-items:center; justify-content:center; width:100%; height:48px; margin:0; padding:0 18px;
  border:0; border-radius:11px; background:var(--grn); color:#fff; box-shadow:none;
  font-family:var(--sans); font-size:15px; font-weight:700; line-height:1; letter-spacing:0; text-transform:none;
  cursor:pointer; transition:background-color .15s ease;
}
.bcnc-svc .svc-side .fluentform .ff_submit_btn_wrapper button:not(.ff_btn_no_style):hover{background:var(--grn-dk)}
.bcnc-svc .svc-side .ff-message-success{
  margin:0; padding:14px 16px; border:1px solid var(--grn-bd); border-radius:12px; background:var(--tint-grn);
  font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--grn-dk); box-shadow:none;
}
.bcnc-svc .svc-side .ff-message-success p{margin:0}

/* ------------------------------------------------ route diagram (SVG)
   One explanatory image per state page: correction route vs legal name
   change. Capped at 420px so the 15px type inside the SVG stays legible
   on a phone, and centred with a caption in the body type scale. */
.bcnc-guide.bcnc-svc .bcnc-body figure.bcnc-diagram{
  margin:4px auto 22px; padding:0; max-width:420px; text-align:center;
}
.bcnc-guide.bcnc-svc .bcnc-body figure.bcnc-diagram img{
  display:block; width:100%; height:auto; margin:0 auto;
  border:1px solid var(--bd); border-radius:var(--r-md); background:#fff;
}
.bcnc-guide.bcnc-svc .bcnc-body figure.bcnc-diagram figcaption{
  margin:10px auto 0; max-width:38ch;
  font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--muted); text-align:center;
}
@media (max-width:560px){
  .bcnc-guide.bcnc-svc .bcnc-body figure.bcnc-diagram{max-width:100%}
}