/* =========================================================================
   Professional Behavior Analysis
   Editorial clinical — a specialist practice, set like a good journal.

   Everything is scoped to .pba-site so the plugin can never bleed into the
   theme's own pages.
   ========================================================================= */

.pba-site{
  --ink:#0E1726;
  --body:#3D4A5C;
  --mute:#5D6A78;        /* 5.35:1 on paper, 4.86:1 on the tinted panel */
  --paper:#FCFBF9;
  --panel:#F2F0EC;
  --line:#E0DDD6;
  --rule:#C8C3B8;

  --blue:#2B5672;        /* 12.8:1 on paper */
  --blue-lift:#3E6B8C;
  --blue-wash:#EDF0F7;
  --sun:#D9C79B;

  --serif:'Fahkwang',Georgia,'Times New Roman',serif;
  --sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --t-xs:12px; --t-sm:14px; --t-base:17px; --t-md:19px;
  --t-lg:clamp(21px,1.9vw,25px);
  --t-xl:clamp(27px,3.1vw,38px);
  --t-2xl:clamp(34px,4.7vw,56px);
  --t-3xl:clamp(42px,6.6vw,80px);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:132px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 30px 60px -40px rgba(14,23,38,.5);
}

.pba-site *,.pba-site *::before,.pba-site *::after{box-sizing:border-box}

html:has(body.pba-site){overflow-x:clip}
body.pba-site{
  margin:0;background:var(--paper);color:var(--body);
  font:400 var(--t-base)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* clip, not hidden — `hidden` here silently kills position:sticky */
  overflow-x:clip;
}

.pba-site img{max-width:100%;display:block;height:auto}
.pba-site a{color:var(--blue)}
.pba-site h1,.pba-site h2,.pba-site h3,.pba-site h4{
  margin:0;color:var(--ink);font-family:var(--serif);font-weight:500;
  line-height:1.06;letter-spacing:-.02em}
.pba-site p{margin:0 0 1.1em}
.pba-site p:last-child{margin-bottom:0}
.pba-site .ico{width:16px;height:16px;flex:0 0 auto}

.pba-site .wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.pba-site .narrow{width:min(760px,100% - 48px);margin-inline:auto}
.pba-site .mb{margin-bottom:var(--s3)}
.pba-site .h-md{font-size:var(--t-xl);margin-bottom:16px}

.pba-site .skip,.pba-site .skip:hover,.pba-site .skip:focus{
  position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 3px 0;text-decoration:none}
.pba-site .skip:focus{left:0}

/* ---------- atoms ---------- */

.pba-site .kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font:600 var(--t-xs)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue)}
.pba-site .kicker::before{content:"";width:28px;height:1px;background:var(--rule);flex:0 0 auto}
.sect-head.center .kicker{justify-content:center}

.pba-site .lede{font-size:var(--t-md);line-height:1.6;max-width:62ch}
.pba-site .dim{color:var(--mute)}

.pba-site .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1px solid transparent;border-radius:2px;
  font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;min-height:50px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.pba-site .btn .ico{transition:transform .3s var(--ease)}
.pba-site .btn:hover .ico{transform:translateX(4px)}
.pba-site .btn-fill{background:var(--blue);color:#fff}
.pba-site .btn-fill:hover{background:#1D3C52;color:#fff}
.pba-site .btn-line{border-color:var(--rule);color:var(--ink);background:transparent}
.pba-site .btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.pba-site .btn-cream{background:#fff;color:var(--blue)}
.pba-site .btn-cream:hover{background:var(--sun);color:var(--ink)}
.pba-site .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.pba-site .btn-ghost:hover{background:#fff;color:var(--blue);border-color:#fff}

/* =========================================================================
   Utility bar + header
   ========================================================================= */

.pba-site .util{background:var(--ink);color:rgba(255,255,255,.84);font-size:13px}
.pba-site .util .wrap{display:flex;align-items:center;gap:24px;min-height:40px;flex-wrap:wrap}
.pba-site .util a,.pba-site .util span{display:inline-flex;align-items:center;gap:8px}
.pba-site .util a{color:inherit;text-decoration:none}
.pba-site .util a:hover{color:#fff}
.pba-site .util .ico{width:14px;height:14px;opacity:.7}
.pba-site .util-end{margin-left:auto;color:var(--sun);font-weight:500}

.pba-site .head{position:sticky;top:0;z-index:90;background:rgba(252,251,249,.94);
  backdrop-filter:blur(12px) saturate(160%);border-bottom:1px solid var(--line)}
.pba-site .head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:84px;transition:min-height .3s var(--ease)}
.pba-site .head.is-stuck .head-in{min-height:66px}

.pba-site .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.pba-site .brand img{width:46px;transition:width .3s var(--ease)}
.pba-site .head.is-stuck .brand img{width:38px}
.pba-site .brand-t b{display:block;font:500 17px/1.1 var(--serif);color:var(--ink);
  letter-spacing:-.01em}
.pba-site .brand-t span{display:block;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-top:3px}

.pba-site .nav{display:flex;align-items:center;gap:32px}
.pba-site .nav-l{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.pba-site .nav-a{position:relative;display:inline-flex;align-items:center;gap:7px;
  color:var(--ink);text-decoration:none;font:500 15px/1 var(--sans);
  padding:10px 0;background:none;border:0;cursor:pointer;font-family:var(--sans)}
.pba-site .nav-a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
  background:var(--ink);transition:right .3s var(--ease)}
.pba-site .nav-a:hover::after,.pba-site .nav-a.is-on::after{right:0}
/* .nav a{color:ink} would otherwise outrank the button's white text and leave
   the primary CTA dark-on-dark at 1.4:1 — invisible. */
.pba-site .nav .nav-cta,.pba-site .nav .nav-cta:hover{color:#fff}
.pba-site .nav-cta::after{display:none}

.pba-site .caret{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease)}
.pba-site .mega-btn[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-2px)}

/* =========================================================================
   Services mega menu
   ========================================================================= */

.pba-site .has-mega{position:static}

.pba-site .mega{position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 40px 70px -50px rgba(14,23,38,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:95}
.pba-site .mega[hidden]{display:block}     /* animate rather than snap */
.pba-site .has-mega.is-open .mega{opacity:1;visibility:visible;transform:none}

.pba-site .mega-in{display:grid;grid-template-columns:1fr 320px;gap:var(--s5);
  padding:38px 0 42px;align-items:start}

.pba-site .mega-h{font:600 var(--t-xs)/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin:0 0 22px}

.pba-site .mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 32px}

.pba-site .mega-item{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;
  margin-left:-16px;border-radius:3px;text-decoration:none;
  transition:background .25s var(--ease)}
.pba-site .mega-item:hover{background:var(--blue-wash)}
.pba-site .mega-ico{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:3px;color:var(--blue);background:#fff;
  transition:background .25s,color .25s,border-color .25s}
.pba-site .mega-ico .ico{width:19px;height:19px}
.pba-site .mega-item:hover .mega-ico{background:var(--blue);border-color:var(--blue);color:#fff}
.pba-site .mega-t{display:block;font:500 16px/1.3 var(--serif);color:var(--ink)}
.pba-site .mega-d{display:block;font-size:13px;color:var(--mute);margin-top:3px;line-height:1.45}

.pba-site .mega-all{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font:600 14px/1 var(--sans);color:var(--blue);text-decoration:none;
  padding-top:20px;border-top:1px solid var(--line);width:100%}
.pba-site .mega-all .ico{transition:transform .3s var(--ease)}
.pba-site .mega-all:hover .ico{transform:translateX(4px)}

.pba-site .mega-side{background:var(--panel);padding:22px;border-radius:3px}
.pba-site .mega-side img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;
  margin-bottom:18px}
.pba-site .mega-side-h{font:500 17px/1.3 var(--serif);color:var(--ink);margin:0 0 8px}
.pba-site .mega-side-x{font-size:14px;color:var(--mute);margin:0 0 18px;line-height:1.55}
.pba-site .mega-side .btn{width:100%}
.pba-site .mega-tel{display:block;text-align:center;margin-top:12px;font-size:14px;
  color:var(--ink);text-decoration:none;font-weight:500}
.pba-site .mega-tel:hover{color:var(--blue)}

.pba-site .burger{display:none;width:46px;height:46px;border:1px solid var(--line);
  background:none;border-radius:2px;cursor:pointer;position:relative}
.pba-site .burger i{position:absolute;left:13px;width:20px;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s}
.pba-site .burger i:nth-child(1){top:16px}
.pba-site .burger i:nth-child(2){top:22px}
.pba-site .burger i:nth-child(3){top:28px}
.pba-site .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pba-site .burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.pba-site .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.pba-site .scrim{position:fixed;inset:0;background:rgba(14,23,38,.4);z-index:85;
  opacity:0;transition:opacity .3s}
.pba-site .scrim.is-on{opacity:1}

/* =========================================================================
   Hero
   ========================================================================= */

.pba-site .hero{position:relative;padding:var(--s7) 0 var(--s6);overflow:hidden}
.pba-site .hero::after{content:"";position:absolute;inset:0 0 0 58%;background:var(--panel);z-index:-1}
.pba-site .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);align-items:center}
.pba-site .hero h1{font-size:var(--t-3xl);letter-spacing:-.035em;line-height:.98}
.pba-site .hero h1 em{font-style:normal;color:var(--blue);
  background:linear-gradient(currentColor,currentColor) 0 92%/100% 1px no-repeat}
.pba-site .hero .lede{margin:26px 0 34px}
.pba-site .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.pba-site .hero-media{position:relative}
.pba-site .hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.pba-site .hero-card{position:absolute;left:18px;bottom:26px;background:var(--paper);
  border:1px solid var(--line);padding:22px 26px;max-width:280px;box-shadow:var(--shadow)}
.pba-site .hero-card b{display:block;font:500 15px/1.3 var(--serif);color:var(--ink);margin-bottom:6px}
.pba-site .hero-card span{font-size:13.5px;line-height:1.5;color:var(--mute)}

/* page heads for inner pages */
.pba-site .phead{background:var(--panel);border-bottom:1px solid var(--line);
  padding:var(--s6) 0 var(--s5)}
.pba-site .phead h1{font-size:var(--t-2xl);margin-bottom:18px}

/* ---------- credential strip ---------- */
.pba-site .strip{border-bottom:1px solid var(--line);background:var(--paper)}
.pba-site .strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.pba-site .strip div{padding:26px 28px 26px 0;border-right:1px solid var(--line)}
.pba-site .strip div:last-child{border-right:0}
.pba-site .strip dt{font:500 var(--t-lg)/1 var(--serif);color:var(--ink);margin-bottom:6px}
.pba-site .strip dd{margin:0;font-size:13.5px;color:var(--mute);line-height:1.5}

/* =========================================================================
   Sections
   ========================================================================= */

.pba-site .sect{padding:var(--s6) 0}
.pba-site .sect-tint{background:var(--panel)}
.pba-site .sect-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);
  align-items:end;margin-bottom:var(--s5)}
.pba-site .sect-head h2{font-size:var(--t-2xl)}
.pba-site .sect-head.center{grid-template-columns:1fr;text-align:center;justify-items:center}

/* ---------- services index ---------- */
.pba-site .index{border-top:1px solid var(--line)}
.pba-site .index-row{display:grid;grid-template-columns:64px 1.1fr 1.4fr auto;gap:var(--s3);
  align-items:center;padding:30px 0;border-bottom:1px solid var(--line);
  text-decoration:none;position:relative;transition:padding-left .35s var(--ease)}
.pba-site .index-row:hover{padding-left:14px}
.pba-site .index-row::before{content:"";position:absolute;inset:0 -20px;
  background:var(--blue-wash);opacity:0;transition:opacity .3s var(--ease);z-index:-1}
.pba-site .index-row:hover::before{opacity:1}
.pba-site .index-num{font:500 13px/1 var(--sans);color:var(--mute);letter-spacing:.1em}
.pba-site .index-row h3{font-size:var(--t-lg);transition:color .25s}
.pba-site .index-row:hover h3{color:var(--blue)}
.pba-site .index-row p{margin:0;font-size:15px;color:var(--mute);line-height:1.6}
.pba-site .index-go{width:38px;height:38px;border:1px solid var(--rule);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  transition:background .3s var(--ease),border-color .3s,color .3s}
.pba-site .index-row:hover .index-go{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- method ---------- */
.pba-site .method{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s5)}
.pba-site .method article{padding:30px 0;border-top:1px solid var(--line)}
.pba-site .method .n{display:block;font:500 12px/1 var(--sans);letter-spacing:.18em;
  color:var(--blue);margin-bottom:12px}
.pba-site .method h3{font-size:var(--t-lg);margin-bottom:10px}
.pba-site .method p{margin:0;font-size:15.5px;color:var(--mute);line-height:1.65}

/* ---------- split ---------- */
.pba-site .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.pba-site .split.flip .split-media{order:2}
.pba-site .split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.pba-site .split-copy .btn{margin-top:var(--s2)}

/* ---------- statement ---------- */
.pba-site .statement{background:var(--ink);color:#fff;padding:var(--s6) 0}
.pba-site .statement blockquote{margin:0;font-family:var(--serif);font-weight:400;
  font-size:var(--t-xl);line-height:1.32;letter-spacing:-.02em;color:#fff}
.pba-site .statement figcaption{margin-top:24px;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---------- mosaic ---------- */
.pba-site .mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.pba-site .mosaic a{display:block;overflow:hidden;background:var(--panel);border-radius:2px}
.pba-site .mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pba-site .mosaic a:hover img{transform:scale(1.04)}
.pba-site .m-a{grid-column:span 7;aspect-ratio:16/11}
.pba-site .m-b{grid-column:span 5;aspect-ratio:4/3}
.pba-site .m-c,.pba-site .m-d,.pba-site .m-e{grid-column:span 4;aspect-ratio:1/1}

/* ---------- faq ---------- */
.pba-site .faq{border-top:1px solid var(--line);max-width:900px;margin-inline:auto;width:100%}
.pba-site .faq details{border-bottom:1px solid var(--line)}
.pba-site .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:24px 0;min-height:56px;
  font:500 var(--t-md)/1.4 var(--serif);color:var(--ink)}
.pba-site .faq summary::-webkit-details-marker{display:none}
.pba-site .faq summary i{position:relative;width:14px;height:14px;flex:0 0 auto}
.pba-site .faq summary i::before,.pba-site .faq summary i::after{content:"";
  position:absolute;background:var(--blue);transition:transform .3s var(--ease)}
.pba-site .faq summary i::before{top:6.5px;left:0;width:14px;height:1.5px}
.pba-site .faq summary i::after{left:6.5px;top:0;width:1.5px;height:14px}
.pba-site .faq details[open] summary i::after{transform:scaleY(0)}
.pba-site .faq .a{padding:0 0 24px;max-width:70ch;color:var(--mute);font-size:15.5px;line-height:1.7}

/* ---------- jobs ---------- */
.pba-site .jobs{border-top:1px solid var(--line)}
.pba-site .job{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:26px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pba-site .job h3{font-size:var(--t-lg);margin-bottom:6px}
.pba-site .job p{margin:0;display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--mute)}

/* ---------- contact ---------- */
.pba-site .contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.pba-site .field{margin-bottom:18px;display:flex;flex-direction:column}
.pba-site .field label{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);margin-bottom:9px}
.pba-site .field input,.pba-site .field textarea{
  font:400 16px/1.5 var(--sans);color:var(--ink);background:var(--paper);
  border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:11px 0;width:100%;
  transition:border-color .25s,box-shadow .25s}
.pba-site .sect-tint .field input,.pba-site .sect-tint .field textarea{background:var(--panel)}
.pba-site .field input:focus,.pba-site .field textarea:focus{
  outline:none;border-bottom-color:var(--blue);box-shadow:0 1px 0 0 var(--blue)}
.pba-site .field.has-err input,.pba-site .field.has-err textarea{border-bottom-color:#B3261E}
.pba-site .pair{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}

.pba-site .err{margin:7px 0 0;font-size:13px;color:#B3261E;display:none}
.pba-site .err.is-on{display:block}

.pba-site .consent{display:flex;align-items:flex-start;gap:11px;margin:6px 0 4px;
  font-size:14.5px;color:var(--body);cursor:pointer}
.pba-site .consent input{width:19px;height:19px;margin-top:2px;flex:0 0 auto;accent-color:var(--blue)}

/* The honeypot must be invisible to people but reachable to a bot. */
.pba-site .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden}

.pba-site .form-msg{margin:18px 0 0;font-size:15px;display:none}
.pba-site .form-msg.is-on{display:block}
.pba-site .form-msg.ok{color:#14532D}
.pba-site .form-msg.bad{color:#B3261E}
.pba-site .form-fine{margin:14px 0 0;font-size:13px;color:var(--mute)}
.pba-site .pba-form .btn[disabled]{opacity:.6;cursor:progress}

.pba-site .details{border-top:1px solid var(--line)}
.pba-site .details div{padding:22px 0;border-bottom:1px solid var(--line)}
.pba-site .details dt{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:8px}
.pba-site .details dd{margin:0;font-size:var(--t-md);color:var(--ink);font-family:var(--serif)}
.pba-site .details a{color:var(--ink);text-decoration:none}
.pba-site .details a:hover{color:var(--blue)}

/* =========================================================================
   Pre-footer + footer
   ========================================================================= */

.pba-site .prefoot{background:var(--blue);color:#fff;padding:var(--s5) 0}
.pba-site .prefoot-in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap}
.pba-site .prefoot h2{color:#fff;font-size:var(--t-xl);margin-bottom:10px}
.pba-site .prefoot p{color:rgba(255,255,255,.85);margin:0;max-width:52ch}
.pba-site .prefoot-a{display:flex;gap:12px;flex-wrap:wrap}

.pba-site .foot{background:var(--ink);color:rgba(255,255,255,.74);padding:var(--s6) 0 0}
.pba-site .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--s4);
  padding-bottom:var(--s5)}
.pba-site .foot h3{color:#fff;font:600 11.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:20px;font-family:var(--sans)}
.pba-site .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pba-site .foot a{color:rgba(255,255,255,.74);text-decoration:none;font-size:15px}
.pba-site .foot a:hover{color:#fff}
.pba-site .foot-c a,.pba-site .foot-c .plain{display:flex;align-items:flex-start;gap:10px;
  color:rgba(255,255,255,.74);font-size:15px}
.pba-site .foot-c .ico{margin-top:3px;opacity:.6}
.pba-site .foot-brand img{width:52px;background:#fff;padding:7px;border-radius:2px}
.pba-site .foot-brand p{margin:18px 0 2px;font-family:var(--serif);font-size:17px;color:#fff}
.pba-site .foot-brand span{font-size:13px;color:rgba(255,255,255,.55)}
.pba-site .foot-base{border-top:1px solid rgba(255,255,255,.14);padding:22px 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.55)}
.pba-site .foot-base p{margin:0}
.pba-site .foot-base nav{display:flex;gap:24px}
.pba-site .foot-base a{font-size:13px}
.pba-site .foot-note{padding:0 0 26px;font-size:12.5px;color:rgba(255,255,255,.42);margin:0}

/* =========================================================================
   Motion — subtle, and never load-bearing
   ========================================================================= */

.pba-site .rv{opacity:1;transform:none}
.pba-motion .rv{opacity:0;transform:translateY(18px)}
.pba-motion .rv.is-in{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}

.pba-site :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.pba-site .util :focus-visible,.pba-site .foot :focus-visible,
.pba-site .statement :focus-visible,.pba-site .prefoot :focus-visible{outline-color:#fff}

/* =========================================================================
   Responsive
   ========================================================================= */

@media(max-width:1180px){
  .pba-site .nav-l{gap:20px}
  .pba-site .mega-in{grid-template-columns:1fr 280px;gap:var(--s4)}
}

@media(max-width:1024px){
  .pba-site .hero-in{grid-template-columns:1fr;gap:var(--s4)}
  .pba-site .hero::after{inset:auto 0 0 0;height:32%}
  .pba-site .hero-card{position:static;margin:-40px 0 0 24px;max-width:none}
  .pba-site .hero-media img{aspect-ratio:16/10}
  .pba-site .sect-head{grid-template-columns:1fr;gap:var(--s2)}
  .pba-site .method{grid-template-columns:1fr;gap:0}
  .pba-site .contact{grid-template-columns:1fr;gap:var(--s4)}
  .pba-site .split{grid-template-columns:1fr;gap:var(--s3)}
  .pba-site .split.flip .split-media{order:0}
  .pba-site .strip .wrap{grid-template-columns:1fr 1fr}
  .pba-site .strip div{border-right:0;border-bottom:1px solid var(--line)}
  .pba-site .foot-top{grid-template-columns:1fr 1fr}
}

/* ---------- mobile drawer ---------- */
@media(max-width:900px){
  .pba-site .burger{display:block}

  .pba-site .nav{position:fixed;inset:0 0 0 auto;width:min(400px,88vw);
    background:var(--paper);border-left:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;
    padding:26px 24px calc(26px + env(safe-area-inset-bottom));
    transform:translateX(102%);
    transition:transform .38s var(--ease),visibility .38s;
    visibility:hidden;                 /* not focusable while closed */
    overflow-y:auto;overscroll-behavior:contain;z-index:95;
    box-shadow:-30px 0 60px -40px rgba(14,23,38,.6)}
  .pba-site .nav.is-open{transform:none;visibility:visible}

  .pba-site .nav-l{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .pba-site .nav-l>li{border-bottom:1px solid var(--line)}
  .pba-site .nav-a{width:100%;justify-content:space-between;padding:17px 0;
    font-size:17px;min-height:54px}
  .pba-site .nav-a::after{display:none}
  .pba-site .nav-cta{margin-top:22px;width:100%}

  /* the mega menu becomes an accordion inside the drawer */
  .pba-site .mega{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:transparent;
    display:none;transition:none}
  .pba-site .has-mega.is-open .mega{display:block}
  .pba-site .mega-in{grid-template-columns:1fr;gap:0;padding:0 0 18px}
  .pba-site .mega-h{display:none}
  .pba-site .mega-grid{grid-template-columns:1fr;gap:0}
  .pba-site .mega-item{margin-left:0;padding:13px 0;min-height:54px}
  .pba-site .mega-item:hover{background:transparent}
  .pba-site .mega-ico{width:34px;height:34px}
  .pba-site .mega-all{margin:6px 0 0;padding-top:16px}
  .pba-site .mega-side{display:none}
}

@media(max-width:600px){
  .pba-site{--s5:44px;--s6:64px;--s7:76px}
  .pba-site .wrap,.pba-site .narrow{width:min(1240px,100% - 32px)}
  .pba-site .hero h1{font-size:clamp(34px,9.5vw,50px)}
  .pba-site .hero-actions .btn{flex:1 1 100%}
  .pba-site .hero-card{margin-left:0}
  .pba-site .index-row{grid-template-columns:38px 1fr auto;gap:14px;padding:22px 0}
  .pba-site .index-row p{display:none}
  .pba-site .mosaic{grid-template-columns:repeat(6,1fr)}
  .pba-site .m-a,.pba-site .m-b{grid-column:span 6}
  .pba-site .m-c,.pba-site .m-d,.pba-site .m-e{grid-column:span 2}
  .pba-site .pair{grid-template-columns:1fr}
  .pba-site .strip .wrap{grid-template-columns:1fr}
  .pba-site .foot-top{grid-template-columns:1fr;gap:var(--s3)}
  .pba-site .foot-base{flex-direction:column}
  .pba-site .prefoot-a .btn{flex:1 1 100%}
  /* iOS zooms any input under 16px on focus */
  .pba-site .field input,.pba-site .field textarea{font-size:16px}

  /* Tap targets. Utility-bar and footer links were 21–24px tall — fine with a
     mouse, fiddly for a parent holding a child in the other arm. */
  .pba-site .util a{padding:9px 0;min-height:40px}
  .pba-site .util .wrap{gap:6px 20px;padding-block:6px}
  .pba-site .foot ul a,.pba-site .foot-c a,.pba-site .foot-base a{
    display:inline-flex;align-items:center;min-height:44px}
  .pba-site .foot ul{gap:2px}
  .pba-site .consent{padding:10px 0;min-height:44px;align-items:center}
  .pba-site .consent input{width:22px;height:22px;margin-top:0}
  .pba-site .index-row{min-height:56px}
}

@media(prefers-reduced-motion:reduce){
  .pba-motion .rv{opacity:1;transform:none}
  .pba-site *,.pba-site *::before,.pba-site *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media print{
  .pba-site .util,.pba-site .head,.pba-site .burger,.pba-site .prefoot{display:none}
  .pba-motion .rv{opacity:1;transform:none}
  .pba-site .sect{padding:20px 0}
}

/* =========================================================================
   Elementor compatibility
   -------------------------------------------------------------------------
   Exported pages use the SAME classes as the template-rendered pages, so
   there is only ever one design. But Elementor's DOM differs:

     • a container is a .e-con that Elementor sets to display:flex
     • a widget class lands on the .elementor-widget WRAPPER, not on the
       <a>, <h3> or <div> inside it

   Each rule below re-points one class at the element that now carries it.
   Nothing here is a second design — it is the same design surviving a
   different DOM.
   ========================================================================= */

.pba-site .e-con.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.pba-site .e-con.narrow{width:min(760px,100% - 48px);margin-inline:auto}
.pba-site .e-con.sect{padding:var(--s6) 0;width:100%}
.pba-site .e-con.phead{padding:var(--s6) 0 var(--s5);width:100%}
.pba-site .e-con.hero{padding:var(--s7) 0 var(--s6);width:100%}

.pba-site .e-con.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);align-items:center}
.pba-site .e-con.sect-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:end;margin-bottom:var(--s5)}
.pba-site .e-con.sect-head.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.pba-site .e-con.method{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s5)}
.pba-site .e-con.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.pba-site .e-con.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.pba-site .e-con.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.pba-site .e-con.split.flip .split-media{order:2}
.pba-site .e-con.strip>.wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.pba-site .e-con.hero-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}
.pba-site .e-con.index-row{display:grid;grid-template-columns:64px 1.1fr 1.4fr;gap:var(--s3);
  align-items:center;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none}
.pba-site .e-con.job{display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:26px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pba-site .e-con.details>.e-con{padding:22px 0;border-bottom:1px solid var(--line)}
.pba-site .e-con.method>.e-con{padding:30px 0;border-top:1px solid var(--line)}
.pba-site .e-con.strip>.wrap>.e-con{padding:26px 28px 26px 0;border-right:1px solid var(--line)}

/* buttons: the class is on the wrapper, the control is the <a> inside */
.pba-site .elementor-widget.btn{width:auto;flex:0 0 auto}
.pba-site .btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:2px;font:600 15px/1 var(--sans);min-height:50px;text-decoration:none;
  transition:background .25s var(--ease),color .25s,border-color .25s}
.pba-site .btn-fill .elementor-button{background:var(--blue);color:#fff}
.pba-site .btn-fill .elementor-button:hover{background:#1D3C52;color:#fff}
.pba-site .btn-line .elementor-button{border:1px solid var(--rule);color:var(--ink);background:transparent}
.pba-site .btn-line .elementor-button:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* short text widgets: strip the heading's own styling, keep the class's */
.pba-site .kicker .elementor-heading-title,
.pba-site .index-num .elementor-heading-title,
.pba-site .n .elementor-heading-title,
.pba-site .details .elementor-heading-title,
.pba-site .strip .elementor-heading-title{font:inherit;color:inherit;margin:0}
.pba-site .elementor-widget.kicker{width:auto}
.pba-site .elementor-widget-heading{margin:0}
.pba-site .elementor-widget-text-editor p:last-child{margin-bottom:0}

/* statement band + hero card */
.pba-site .e-con.statement{background:var(--ink);padding:var(--s6) 0;width:100%}
.pba-site .statement .elementor-widget-text-editor,
.pba-site .e-con.statement blockquote{color:#fff}
.pba-site .e-con.hero-card{background:var(--paper);border:1px solid var(--line);
  padding:22px 26px;max-width:280px;box-shadow:var(--shadow)}

/* FAQ: the stock accordion, restyled to the ruled register */
.pba-site .faq .elementor-accordion-item{border:0;border-bottom:1px solid var(--line)}
.pba-site .faq .elementor-tab-title{padding:24px 0;font:500 var(--t-md)/1.4 var(--serif);color:var(--ink)}
.pba-site .faq .elementor-tab-content{padding:0 0 24px;border:0;color:var(--mute)}

@media(max-width:1024px){
  .pba-site .e-con.hero-in,.pba-site .e-con.contact,.pba-site .e-con.split,
  .pba-site .e-con.sect-head,.pba-site .e-con.method{grid-template-columns:1fr}
  .pba-site .e-con.strip>.wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .pba-site .e-con.index-row{grid-template-columns:38px 1fr}
  .pba-site .e-con.mosaic{grid-template-columns:repeat(6,1fr)}
  .pba-site .e-con.strip>.wrap{grid-template-columns:1fr}
}

/* strip cells: dt and dd are separate widgets now, so stop them stretching */
.pba-site .e-con.strip>.wrap>.e-con{display:block}
.pba-site .strip .elementor-widget-heading .elementor-heading-title{
  font:500 var(--t-lg)/1 var(--serif);color:var(--ink);margin:0 0 6px}
.pba-site .strip .elementor-widget-text-editor{font-size:13.5px;color:var(--mute);line-height:1.5}
.pba-site .e-con.sect-head>.e-con{display:block}

/* Mobile tap targets.
   Phone, email and footer links were 23-28px tall — under the 44px guidance,
   and these are the links a parent taps one-handed while holding a child. */
@media(max-width:900px){
  .pba-site .details a,.pba-site .details span,
  .pba-site .foot a,.pba-site .topbar a{
    display:inline-flex;align-items:center;min-height:44px}
  .pba-site .foot li{margin-bottom:2px}
  .pba-site .consent{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:6px 0}
  .pba-site .consent input[type=checkbox]{width:24px;height:24px;flex:0 0 24px;margin-top:1px}
}

/* =========================================================================
   Home refresh — to the client mockup.
   PBA's identity is editorial: sharp corners, hairline rules, no lift. The
   sister site is soft and rounded. Both got new sections; they must not end up
   looking like the same site, so these deliberately do not borrow its cards.
   ========================================================================= */

/* hero highlight — a ruled underline, not a highlighter sweep */
.pba-site .hl{color:var(--blue);position:relative;display:inline;
  /* inline, not inline-block: an inline-block wraps as one box, which orphaned
     the sentence's full stop onto a line of its own */
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.pba-site .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:3px;
  background:var(--blue);opacity:.28;transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.16,1,.3,1) .2s}
.pba-site .hl.is-lit::after,.pba-site:not(.pba-mo) .hl::after{transform:scaleX(1)}

/* hero sun */
.pba-site .hero-sun{position:absolute;left:-92px;top:98px;width:82px;height:auto;
  pointer-events:none;z-index:1}
.pba-mo .hero-sun{animation:pba-sun 10s ease-in-out infinite alternate;animation-play-state:paused}
.pba-mo .is-in .hero-sun{animation-play-state:running}
@keyframes pba-sun{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-6px)}}
.pba-site .hero-in>div:first-child{position:relative}
@media(max-width:1400px){.pba-site .hero-sun{left:-68px;top:92px;width:64px}}
@media(max-width:1180px){.pba-site .hero-sun{left:auto;right:4px;top:-52px;width:60px}}
@media(prefers-reduced-motion:reduce){.pba-mo .hero-sun{animation:none}}
.pba-calm-on .hero-sun{animation:none!important}

/* info cards — squared and ruled, the opposite of the sister site's pills */
.pba-site .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper)}
.pba-site .strip>.wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.pba-site .scard{padding:30px 26px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pba-site .scard:last-child{border-right:0}
.pba-site .sico{width:42px;height:42px;margin-bottom:10px}
.pba-site .sico img{width:42px;height:42px;display:block}
.pba-site .scard dt{font:500 21px/1.15 var(--serif);color:var(--ink);margin:0}
.pba-site .scard dd{margin:0;font:400 13.5px/1.55 var(--sans);color:var(--mute)}
.pba-site .scard .slist{font-weight:600;color:var(--body);line-height:1.6}
@media(max-width:1024px){
  .pba-site .strip>.wrap{grid-template-columns:1fr 1fr}
  .pba-site .scard:nth-child(2){border-right:0}
  .pba-site .scard:nth-child(1),.pba-site .scard:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .pba-site .strip>.wrap{grid-template-columns:1fr}
  .pba-site .scard{border-right:0;border-bottom:1px solid var(--line)}
  .pba-site .scard:last-child{border-bottom:0}
}

/* Services — squared, ruled cards with a numbered photo. */
.pba-site .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.pba-site .svc{background:var(--paper);display:flex;flex-direction:column}
.pba-site .svc-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--panel)}
.pba-site .svc-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pba-mo .svc:hover .svc-shot img{transform:scale(1.05)}
.pba-site .svc-num{position:absolute;left:0;bottom:0;background:var(--blue);color:#fff;
  font:600 12px/1 var(--sans);letter-spacing:.08em;padding:9px 13px}
.pba-site .svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.pba-site .svc-body h3{font:500 20px/1.25 var(--serif);color:var(--ink);margin:0}
.pba-site .svc-body h3 a{color:inherit;text-decoration:none}
.pba-site .svc-body h3 a:hover{color:var(--blue)}
.pba-site .svc-body p{font:400 14.5px/1.65 var(--sans);color:var(--mute);margin:0;flex:1}
.pba-site .svc-body .btn{align-self:flex-start;margin-top:4px;padding:11px 18px;
  font-size:14px;min-height:42px}
.pba-mo .svc{transition:background .3s ease}
.pba-mo .svc:hover{background:#fff}
@media(max-width:1024px){.pba-site .svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pba-site .svc-grid{grid-template-columns:1fr}}

/* Reviews — a ruled register, not the sister site's cards. */
.pba-site .reviews{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line)}
.pba-site .review{display:grid;grid-template-columns:150px 1fr;gap:var(--s4);
  padding:28px 0;border-bottom:1px solid var(--line);margin:0;align-items:start}
.pba-site .review blockquote{margin:0;font:400 17px/1.7 var(--sans);color:var(--body)}
.pba-site .review figcaption{font:500 15px/1.4 var(--serif);color:var(--ink)}
.pba-site .stars{display:flex;gap:3px;color:var(--blue);margin-bottom:8px}
.pba-site .stars svg{width:15px;height:15px;fill:currentColor;stroke:none}
.pba-site .reviews-more{margin:26px 0 0}
@media(max-width:700px){
  .pba-site .review{grid-template-columns:1fr;gap:12px}
  .pba-site .review figcaption{order:2}
}

/* Calm / reduced motion: the rule is emphasis, so it is drawn immediately
   rather than skipped. */
.pba-calm-on .hl::after{transform:scaleX(1)!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  .pba-site .hl::after{transform:scaleX(1)!important;transition:none!important}
}
.pba-site .hl2{color:var(--blue)}

/* =========================================================================
   Home, to the client mockup.
   The four accent colours are sampled from the practice's own logo artwork,
   not chosen: #D83018 red, #4860C0 blue, #30A830 green, #F0A800 amber.
   ========================================================================= */
.pba-site{--p-red:#D83018;--p-blue:#4860C0;--p-green:#30A830;--p-amber:#F0A800;
  --p-lemon:#FCE38A;--p-cta:#2E9E4F;--p-cta-deep:#25823F}

.pba-site .h1-play .c1{color:var(--p-red)}
.pba-site .h1-play .c2{color:var(--p-blue)}
.pba-site .h1-play .c3{color:var(--p-green)}
.pba-site .h1-play .c4{color:var(--p-amber)}
.pba-site .h1-play .hl{color:inherit}
.pba-site .h1-play .hl::after{display:none}

/* the lemon sweep sits behind "tomorrow." only */
.pba-site .h1-play .lit{position:relative;display:inline;white-space:nowrap}
.pba-site .h1-play .lit::before{content:"";position:absolute;left:-.06em;right:-.06em;
  top:.16em;bottom:.06em;background:var(--p-lemon);border-radius:4px;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.16,1,.3,1) .25s}
.pba-site .h1-play .lit.is-lit::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.pba-site .h1-play .lit::before{transform:scaleX(1);transition:none}}
.pba-calm-on .h1-play .lit::before{transform:scaleX(1)!important;transition:none!important}

/* the green call to action from the mockup */
.pba-site .hero-actions .btn-fill,.pba-site .head .btn-fill{
  background:var(--p-cta);border-color:var(--p-cta);color:#fff}
.pba-site .hero-actions .btn-fill:hover,.pba-site .head .btn-fill:hover{
  background:var(--p-cta-deep);border-color:var(--p-cta-deep)}

/* a larger, clearer logo lockup */
.pba-site .head .brand img{height:52px;width:auto}
@media(max-width:760px){.pba-site .head .brand img{height:42px}}

/* handwritten notes over the photograph */
.pba-site .hero-media{position:relative}
.pba-site .dd{position:absolute;z-index:2;pointer-events:none;height:auto}
.pba-site .dd-steps{left:-26px;top:-18px;width:104px}
.pba-site .dd-matters{right:-20px;bottom:26px;width:84px}
@media(max-width:1180px){
  .pba-site .dd-steps{width:80px;left:-10px;top:-10px}
  .pba-site .dd-matters{width:64px;right:-6px;bottom:14px}
}
@media(max-width:620px){.pba-site .dd{display:none}}

/* .hero-media img sets width:100%, which stretched these; they need to keep
   their own size, so the selector is scoped tighter than that rule. */
.pba-site .hero-media img.dd{width:auto;height:auto;max-width:none}
.pba-site .hero-media img.dd-steps{width:108px;left:-30px;top:-22px;right:auto;bottom:auto}
.pba-site .hero-media img.dd-matters{width:86px;right:-18px;bottom:22px;left:auto;top:auto}
@media(max-width:1180px){
  .pba-site .hero-media img.dd-steps{width:82px;left:-12px;top:-12px}
  .pba-site .hero-media img.dd-matters{width:66px;right:-8px;bottom:12px}
}
@media(max-width:620px){.pba-site .hero-media img.dd{display:none}}

/* .hero-media clips its overflow, so these sit inside the photograph rather
   than overhanging it. */
.pba-site .hero-media img.dd-steps{left:16px;top:14px}
.pba-site .hero-media img.dd-matters{right:16px;bottom:16px}
@media(max-width:1180px){
  .pba-site .hero-media img.dd-steps{left:10px;top:10px}
  .pba-site .hero-media img.dd-matters{right:10px;bottom:10px}
}

/* =========================================================================
   MOCKUP SKIN
   The mockup is soft and playful: warm cream ground, rounded everything,
   pill buttons, scattered puzzle shapes. PBA was built squared and editorial,
   so this section restyles it rather than leaving two conflicting languages.
   Colours remain the four sampled from the practice's own logo.
   ========================================================================= */
.pba-site{
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --cream:#FFFCF5; --mint:#E9F6EE; --sky:#EAF1FC; --blush:#FDEEE8;
}

/* warm ground, with soft colour fields behind the hero */
.pba-site,.pba-site .sect{background:var(--cream)}
.pba-site .hero{position:relative;background:var(--cream);overflow:hidden}
.pba-site .hero::before,.pba-site .hero::after{content:"";position:absolute;border-radius:50%;
  pointer-events:none;z-index:0}
.pba-site .hero::before{width:640px;height:640px;left:-220px;top:-260px;
  background:radial-gradient(circle,var(--mint) 0%,rgba(233,246,238,0) 70%)}
.pba-site .hero::after{width:720px;height:720px;right:-260px;bottom:-320px;
  background:radial-gradient(circle,var(--sky) 0%,rgba(234,241,252,0) 70%)}
.pba-site .hero .wrap{position:relative;z-index:1}

/* pill buttons */
.pba-site .btn{border-radius:999px}
.pba-site .btn-fill{box-shadow:0 8px 20px rgba(46,158,79,.22)}
.pba-site .btn-line{background:#fff;border-radius:999px}

/* the photograph, rounded like the mockup */
.pba-site .hero-media{border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 18px 44px rgba(14,23,38,.10)}
.pba-site .hero-media>img{border-radius:var(--r-xl)}
.pba-site .hero-card{border-radius:var(--r-md);border:0;
  box-shadow:0 10px 28px rgba(14,23,38,.12)}

/* info cards: white, rounded, separated — not divided by rules */
.pba-site .strip{border:0;background:transparent}
.pba-site .strip>.wrap{gap:18px;padding-top:8px;padding-bottom:8px}
.pba-site .scard{background:#fff;border:1px solid #EFEAE0;border-radius:var(--r-lg);
  padding:24px 22px;box-shadow:0 6px 18px rgba(14,23,38,.05);align-items:center;
  text-align:center}
.pba-site .scard:last-child,.pba-site .scard:nth-child(2){border-right:1px solid #EFEAE0}
.pba-site .scard dt{font-size:19px}
.pba-site .sico{background:var(--mint);border-radius:50%;width:54px;height:54px;
  display:grid;place-items:center;margin-bottom:12px}
.pba-site .scard:nth-child(2) .sico{background:var(--blush)}
.pba-site .scard:nth-child(3) .sico{background:var(--sky)}
.pba-site .scard:nth-child(4) .sico{background:var(--mint)}
.pba-site .sico img{width:30px;height:30px}
@media(max-width:1024px){
  .pba-site .scard{border:1px solid #EFEAE0!important;border-bottom:1px solid #EFEAE0!important}
}

/* services: rounded photo cards, not a ruled grid */
.pba-site .svc-grid{gap:22px;background:transparent;border:0}
.pba-site .svc{border-radius:var(--r-lg);overflow:hidden;background:#fff;
  border:1px solid #EFEAE0;box-shadow:0 8px 22px rgba(14,23,38,.06)}
.pba-mo .svc{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.pba-mo .svc:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(14,23,38,.12)}
.pba-site .svc-shot{aspect-ratio:16/11}
.pba-site .svc-num{border-radius:0 var(--r-md) 0 0;background:var(--p-green)}
.pba-site .svc-body .btn{border-radius:999px;background:var(--p-amber);
  border-color:var(--p-amber);color:#20180A;font-weight:700}
.pba-site .svc-body .btn:hover{background:#DE9B00;border-color:#DE9B00}

/* reviews, rounded to match */
.pba-site .reviews{border:0}
.pba-site .review{background:#fff;border:1px solid #EFEAE0;border-radius:var(--r-lg);
  padding:24px;margin-bottom:16px;box-shadow:0 6px 18px rgba(14,23,38,.05)}