/* Better Services Rehab Program - boxed early-responsive brochure shell.
   Local stylesheet only: no webfonts, no @import, no external requests. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:#e7e3ec;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.55) 0 1px, rgba(0,0,0,0) 1px 4px);
  color:#26222c;
  font:16px/1.62 Arial,"Helvetica Neue","Liberation Sans",sans-serif;
}
img{max-width:100%;height:auto;border:0}
a{color:#5b4380}
a:hover{color:#3f2d5c}
p{margin:0 0 16px}
h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;letter-spacing:-.005em;color:#26222c;margin:0 0 12px;
}
ul{margin:0 0 16px;padding-left:22px}
li{margin:0 0 8px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:#ffffff;color:#26222c;padding:10px 16px;border:2px solid #5b4380;
}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid #5b4380;outline-offset:2px}
.page-menu a:focus-visible,.site-foot a:focus-visible{outline-color:#ffffff}
.sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- boxed shell -------------------------------------------------------- */
.shell{
  max-width:1120px;margin:24px auto;background:#ffffff;
  border:1px solid #d4cddd;box-shadow:0 1px 3px rgba(38,34,44,.20);
}
.pad{padding:0 28px}

/* ---- 1. masthead -------------------------------------------------------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:96px;padding:16px 28px;border-bottom:1px solid #d4cddd;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{display:block;width:60px;height:60px}
.brand .lockup{
  font-family:Georgia,"Times New Roman",serif;font-size:27px;line-height:1.05;
  font-weight:700;color:#26222c;margin:0;
}
.brand:hover .lockup{color:#3f2d5c}
.utility{text-align:right}
.utility .cfe{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#55505e;
  margin:0 0 2px;
}
.utility .tel{
  font-family:Georgia,"Times New Roman",serif;font-size:21px;font-weight:700;
  color:#5b4380;text-decoration:none;
}
.utility .tel:hover{text-decoration:underline}

/* ---- 2. rectangular page menu ------------------------------------------ */
.page-menu{background:#2f2a37}
.page-menu ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.page-menu li{margin:0;border-right:1px solid #453e50}
.page-menu a{
  display:block;padding:13px 16px;color:#ffffff;text-decoration:none;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
}
.page-menu a:hover{background:#453e50}
.page-menu a[aria-current="page"]{background:#5b4380}

/* ---- 3. feature image + utility panel ---------------------------------- */
.lead-band{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;
  padding:28px 28px 8px;align-items:start;
}
.lead-frame{border:6px solid #ffffff;outline:1px solid #d4cddd;margin:0}
.lead-frame img{display:block;width:100%}
.lead-frame figcaption{
  border-top:3px solid #5b4380;background:#f6f4f8;padding:10px 12px;
  font-size:13px;line-height:1.5;color:#55505e;
}
.quote-panel{background:#f6f4f8;border:1px solid #d4cddd;padding:16px}
.quote-panel h2{
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;
}
.quote-panel .tel-big{
  display:inline-block;font-family:Georgia,"Times New Roman",serif;font-size:21px;
  font-weight:700;color:#5b4380;text-decoration:none;margin:0 0 8px;
}
.quote-panel p{font-size:15px;margin:0 0 12px}
.quick{margin:0;padding:0;list-style:none;border-top:1px solid #d4cddd}
.quick li{margin:0;border-bottom:1px solid #d4cddd}
.quick a{display:block;padding:9px 0;font-size:14px;min-height:44px}

/* ---- 4. welcome --------------------------------------------------------- */
.welcome{padding:20px 28px 8px;max-width:760px}
.welcome h1{font-size:30px;line-height:1.18;margin:0 0 14px}
.welcome h2{font-size:21px;margin:22px 0 10px}

/* ---- 5. service excerpts ------------------------------------------------ */
.svc-band{
  display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:24px;
  padding:12px 28px 24px;border-top:2px solid #c9c0d8;margin-top:16px;
  align-items:start;
}
.svc-overview h2{font-size:21px;margin:16px 0 10px}
.txt-btn{
  display:inline-block;background:#5b4380;color:#ffffff;text-decoration:none;
  padding:9px 18px;border-radius:2px;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;
}
.txt-btn:hover{background:#3f2d5c;color:#ffffff}
.widget{border:1px solid #d4cddd;background:#f6f4f8;padding:14px;margin:0 0 18px}
.widget > h2,.widget > h3{
  font-family:Arial,"Helvetica Neue",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#26222c;
  border-bottom:3px solid #795ea7;padding-bottom:7px;margin:0 0 12px;
}
.svc-row{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px}
.svc-row:last-child{margin-bottom:0}
.svc-row img{display:block;width:58px;height:58px;flex:0 0 58px}
.svc-row .body{flex:1 1 auto;min-width:0}
.svc-row .body h3{font-size:16px;margin:0 0 4px}
.svc-row .body h3 a{text-decoration:none}
.svc-row .body h3 a:hover{text-decoration:underline}
.svc-row .body p{font-size:14px;line-height:1.55;margin:0}

/* ---- the distinctive motif: seven-criterion rating ledger --------------- */
.ledger{margin:0}
.ledger .row{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 0;border-bottom:1px solid #d4cddd;
}
.ledger .row:last-child{border-bottom:0}
.ledger .criterion{font-size:13px;color:#55505e;white-space:nowrap}
.ledger .leader{flex:1 1 auto;min-width:8px;border-bottom:1px dotted #c9c0d8;transform:translateY(-4px)}
.ledger .stars{flex:0 0 auto;line-height:0}
.ledger .stars svg{width:13px;height:13px;fill:#795ea7}

/* ---- 6. dated recovery notes + resource rail --------------------------- */
.notes-band{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;
  padding:22px 28px;border-top:2px solid #c9c0d8;background:#ffffff;
}
.notes-band > div > h2{font-size:21px;margin:0 0 14px}
.note-row{border-bottom:1px solid #d4cddd;padding:0 0 14px;margin:0 0 14px}
.note-row:last-of-type{border-bottom:0}
.note-row .dateline{font-size:13px;color:#55505e;margin:0 0 4px}
.note-row h3{font-size:17px;margin:0 0 6px}
.note-row p{margin:0;font-size:15px}
.linklist{margin:0;padding:0;list-style:none}
.linklist li{margin:0;border-bottom:1px solid #d4cddd}
.linklist li:last-child{border-bottom:0}
.linklist a{display:block;padding:8px 0;font-size:14px}

/* ---- 7. office / contact strip ----------------------------------------- */
.office-strip{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;
  padding:22px 28px;border-top:2px solid #c9c0d8;background:#f6f4f8;
}
.office-strip h2{font-size:21px;margin:0 0 12px}
.office-facts{font-size:15px;line-height:1.7}
.office-facts a{font-weight:700}
.call-panel{display:flex;gap:16px;align-items:flex-start}
.call-panel img{display:block;width:180px;height:200px;flex:0 0 180px;border:1px solid #d4cddd}
/* the 260px rail is too narrow for a side-by-side portrait: stack it there */
.rail .call-panel{flex-direction:column;gap:12px}
.rail .call-panel img{flex:0 0 auto}
.call-panel .body{min-width:0}
.call-panel .call-now{
  display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:#55505e;margin:0 0 2px;
}
.call-panel .tel-big{
  display:inline-block;font-family:Georgia,"Times New Roman",serif;font-size:21px;
  font-weight:700;color:#5b4380;text-decoration:none;margin:0 0 8px;
}
.call-panel p{font-size:15px;margin:0}

/* ---- 8. widget footer --------------------------------------------------- */
.site-foot{background:#2f2a37;color:#ffffff;padding:26px 28px 8px}
.site-foot a{color:#ffffff}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.foot-cols h2{
  font-family:Arial,"Helvetica Neue",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#ffffff;
  border-bottom:1px solid #453e50;padding-bottom:7px;margin:0 0 12px;
}
.foot-cols ul{margin:0;padding:0;list-style:none}
.foot-cols li{margin:0 0 8px;font-size:14px}
.foot-cols p{font-size:14px;line-height:1.6;margin:0 0 8px}
.foot-note{font-size:13px;color:#cfc8da;margin:0}
.copyright{
  border-top:1px solid #453e50;margin-top:22px;padding:14px 0;
  font-size:13px;color:#cfc8da;
}

/* ---- inner pages -------------------------------------------------------- */
.title-band{
  border-bottom:2px solid #c9c0d8;padding:20px 28px 16px;background:#ffffff;
}
.title-band h1{font-size:36px;line-height:1.15;margin:0}
.crumb{margin:0 0 8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#55505e}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.crumb li::after{content:"/";margin-left:8px;color:#8e879b}
.crumb li:last-child::after{content:""}

.inner-body{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;
  padding:24px 28px;align-items:start;
}
.inner-body .article{grid-column:2;grid-row:1;min-width:0;max-width:760px}
.inner-body .rail{grid-column:1;grid-row:1;min-width:0}
.inner-body.narrow .article{max-width:700px}
.article h2{font-size:21px;margin:24px 0 10px}
.article h2:first-child{margin-top:0}
.article h3{font-size:18px;margin:22px 0 10px}
.article .u{text-decoration:underline}
.article .lead-frame{margin:0 0 20px}

.related{border-top:2px solid #c9c0d8;padding:20px 28px 8px}
.related > h2{font-size:21px;margin:0 0 14px}
.related-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.notes-list .note-row:last-of-type{border-bottom:0}
.standfirst{
  border-top:1px solid #d4cddd;border-bottom:1px solid #d4cddd;
  padding:12px 0;margin:0 0 20px;font-size:15px;color:#55505e;
}

.notfound{padding:40px 28px}
.notfound h1{font-size:36px;margin:0 0 12px}

/* ---- breakpoints -------------------------------------------------------- */
@media (max-width:1180px){
  .shell{margin:16px}
}
@media (max-width:980px){
  .svc-band,.notes-band,.office-strip{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-rows{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  /* 1. remove the outer canvas margin */
  .shell{margin:0;border:0;box-shadow:none;max-width:none}
  .pad,.masthead,.welcome,.svc-band,.notes-band,.office-strip,
  .title-band,.inner-body,.related,.site-foot,.notfound{padding-left:16px;padding-right:16px}
  .masthead{flex-direction:column;align-items:flex-start;gap:10px;min-height:0}
  .utility{text-align:left}

  /* 2. wrap the rectangular menu two per row */
  .page-menu ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-menu li{border-right:1px solid #453e50;border-bottom:1px solid #453e50}
  .page-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px}

  /* 3. stack the feature caption under the image */
  .lead-frame{border-width:0;outline:0;margin:0 0 16px}
  .lead-frame figcaption{border-top-width:3px}

  /* 4. order the overview before the quick-link panel.
     The figure and the utility panel live inside the opening module, so the
     module box is flattened with display:contents and its children are ordered
     against their siblings in main. */
  main{display:flex;flex-direction:column}
  .lead-band{display:contents}
  .lead-frame{order:1}
  .welcome{order:2;padding-top:0}
  .quote-panel{order:3;margin:0 16px 16px}
  .svc-band{order:4}
  .notes-band{order:5}
  .office-strip{order:6}
  .welcome h1{font-size:24px}

  /* 5. alternate the service thumbnails when stacked */
  .svc-row:nth-child(even){flex-direction:row-reverse}

  /* 6. widget rails return to natural flow below the body */
  .inner-body{display:block;padding-top:16px}
  .inner-body .article{max-width:none;margin:0 0 24px}
  .title-band h1{font-size:26px}
  .call-panel{flex-direction:column}
  .call-panel img{width:180px;flex:0 0 auto}
  .ledger .stars svg{width:11px;height:11px}
}
@media (max-width:430px){
  .foot-cols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}