/* GENERATED by build/drs-el/make_css.py - do not edit on the server. Source: build/drs/drs.css */
/* Drug Rehab SEO pillar: only the components the homepage, consulting page and ATM pillar do not already
   have. Everything else (surfaces, heads, cards, panels, bands, quotes, team, accordion, CTA, type) is
   shared, so this page reads as the same site. */

/* ---------- 01 hero: one CTA, so the row is a single button ---------- */
.drs .chero .paths{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.drs .chero .paths .btn{flex:0 0 auto}
.drs .cta-core .paths.mid{display:flex;justify-content:center;margin-top:clamp(22px,3vh,28px)}
/* the hero H1 is three words longer than the ATM one, so it may wrap inside a line */
.drs .chero .tag .ln{white-space:normal}

/* ---------- 04 proof band: the screenshot lives inside the card ---------- */
/* Fixed image box + object-fit means three cards of unequal copy still line up, and the delta number stays
   above the image exactly as the brief asks. */
.gsc{display:flex;flex-direction:column;gap:0}
.svc.dark.gsc .fig{margin-top:8px;white-space:nowrap}
.svc.dark.gsc .delta{margin-top:6px;font-family:var(--body);font-size:14px;font-weight:500;
  line-height:1.5;color:var(--gold);flex:none}
.gsc img{width:100%;height:auto;aspect-ratio:1024/460;object-fit:cover;object-position:top left;display:block;
  margin:16px 0 0;border-radius:10px;border:1px solid rgba(247,242,231,.14);background:rgba(247,242,231,.04)}
.gsc p{margin-top:14px}
.gsc .cap{display:block;margin-top:14px;padding-top:12px;border-top:1px solid rgba(247,242,231,.12);
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-3)}

/* the census block runs copy left, the annotated chart right, both ending level */
.census{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,2.6vw,38px);align-items:center}
.census .cencopy{position:relative;min-width:0}
.census .chart{position:relative;width:100%;height:auto;border-radius:12px;display:block;
  border:1px solid rgba(247,242,231,.14);background:rgba(247,242,231,.04)}
.census .statrow.three{margin-top:clamp(20px,2.6vh,26px)}

/* ---------- 05 four stats across ---------- */
.statrow.four{grid-template-columns:repeat(4,1fr)}
.statrow.four .lstat .fig{font-size:clamp(30px,3vw,42px)}
.side-panel .qlist b{font-family:var(--body);font-weight:600;color:inherit}
.side-panel.dark .qlist b{color:var(--gold)}
.side-panel.cream .qlist b{color:var(--gold-deep)}

/* ---------- 07 expertise hub: seven services as a ledger, not cards ---------- */
/* Cards forced every service into the same box height, so the short ones carried dead space and the wide
   featured one carried an empty half. A ledger row has no box at all: the name column and the copy column
   start on the same baseline and the row ends where the longer of the two ends. */
.svcledger{border-top:1px solid var(--line-light)}
.svcrow{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);
  gap:clamp(20px,3vw,56px);align-items:start;padding:clamp(22px,2.8vh,30px) 0;
  border-bottom:1px solid var(--line-light)}
.svcname{display:flex;flex-direction:column;gap:8px}
.svcname .sn{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--gold-deep)}
.svcname h3{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(21px,1.85vw,27px);
  line-height:1.18;letter-spacing:-.02em;color:var(--navy);transition:color .2s ease}
.svctext p{margin:0;font-size:16px;line-height:1.8;color:var(--on-light-2);max-width:66ch}
.svcrow:hover .svcname h3{color:var(--gold-deep)}
/* the row is link ready: when a child page publishes, its H3 becomes the anchor and this becomes the row */
.svcrow > a{color:inherit;text-decoration:none}

/* ---------- 08 levels of care: twelve one-line entries, six rows per column ---------- */
/* Column-major over six rows puts 01 to 06 down the left and 07 to 12 down the right, so the hairline is
   dropped on items 1 and 7, and item 5 (the ATM grid's second column start) gets its hairline back. */
.sysgrid.six{grid-template-rows:repeat(6,auto)}
.sysgrid.six .sysitem:nth-child(7){border-top:0;padding-top:4px}
.sysgrid.six .sysitem:nth-child(5){border-top:1px solid var(--line-light);padding-top:clamp(16px,2vh,20px)}
.sysgrid.six .sysitem p{max-width:46ch}

/* ---------- 12 own don't rent: the H3 inside the copy column ---------- */
.subh{font-family:var(--disp);font-weight:600;font-size:clamp(21px,1.7vw,25px);line-height:1.25;
  letter-spacing:-.02em;margin:clamp(24px,3vh,32px) 0 12px}
.sec-navy .subh,.sec-deep .subh{color:#fff}
.sec-white .subh,.sec-cream .subh{color:var(--navy)}
.sec-navy .ecol a:not(.btn),.sec-deep .ecol a:not(.btn){color:#fff;text-decoration:underline;
  text-decoration-color:rgba(255,176,0,.6);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color .2s ease}
.sec-navy .ecol a:not(.btn):hover,.sec-deep .ecol a:not(.btn):hover{text-decoration-color:var(--gold)}

/* ---------- 19 a three-up team row ---------- */
/* Three bios of different lengths in equal-height cards: centring the text block splits the leftover space
   above and below instead of leaving it all at the bottom of the shorter cards. */
.teamgrid.three{grid-template-columns:repeat(3,1fr)}
.teamgrid.three .tbody{justify-content:center}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .census{grid-template-columns:1fr}
  .census .chart{order:2}
  .statrow.four{grid-template-columns:repeat(2,1fr)}
  .statrow.four .lstat:nth-child(3){border-left:0}
  .statrow.four .lstat:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .teamgrid.three{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  /* the ledger stacks: name over copy, hairlines still separating the services */
  .svcrow{grid-template-columns:1fr;gap:10px}
  .svctext p{max-width:none}
  .sysgrid.six{grid-template-rows:none}
  .sysgrid.six .sysitem:nth-child(5),.sysgrid.six .sysitem:nth-child(7){
    border-top:1px solid var(--line-light);padding-top:clamp(16px,2vh,20px)}
  .sysgrid.six .sysitem:nth-child(1){border-top:0;padding-top:4px}
  .teamgrid.three{grid-template-columns:1fr}
}
@media (max-width:700px){
  /* three call-volume stats in ~90px columns wrapped their labels over five lines on a phone */
  .census .statrow.three{grid-template-columns:1fr}
  .census .statrow.three .lstat + .lstat{border-left:0;border-top:1px solid var(--line-dark)}
  .statrow.four{grid-template-columns:1fr}
  .statrow.four .lstat + .lstat{border-left:0;border-top:1px solid var(--line-dark)}
  .drs .chero .paths{flex-direction:column;align-items:stretch}
}


/* ---------- Elementor parity for this page ---------- */
/* one CTA in the hero and the final band: Elementor children stretch unless told otherwise */
.bhp-drs .paths .elementor-widget-button{width:auto;flex:0 0 auto}
.bhp-drs .paths{display:flex}
/* the head-to-content gap, matching the static page */
.bhp-drs .shead.e-con{margin-block-end:20px!important}
.bhp-drs .erow.e-con,.bhp-drs .sysgrid.e-con,.bhp-drs .statrow.e-con,.bhp-drs .svcgrid.e-con{
  margin-block-start:0!important}
/* 04 proof cards: the screenshot sits inside the card, the delta line under the figure */
.bhp-drs .gsc .shot img{width:100%;aspect-ratio:1024/460;object-fit:cover;object-position:top left;
  border:1px solid rgba(247,242,231,.14);background:rgba(247,242,231,.04)}
.bhp-drs .gsc .delta .elementor-heading-title{color:var(--gold)}
.bhp-drs .gsc .cap{margin-top:14px;padding-top:12px;border-top:1px solid rgba(247,242,231,.12)}
.bhp-drs .gsc .cap .elementor-heading-title{color:var(--on-dark-3)}
.bhp-drs .gsc .fig .elementor-heading-title{color:var(--gold);white-space:nowrap}
/* the census runs copy left, chart right, ending level. The static rule above makes .census a two column
   grid; in Elementor the two columns ARE the container's own children, so the grid would nest and squeeze
   the stat cells to half width. Flex here, and the children's widths do the split. */
.bhp-drs .census.e-con{display:flex!important;flex-direction:row;align-items:center;
  padding:clamp(26px,3.4vh,34px) clamp(24px,2.6vw,34px)}
.bhp-drs .census.e-con > .e-con{min-width:0}
@media (max-width:1100px){
  .bhp-drs .census.e-con{flex-direction:column!important;align-items:stretch}
  .bhp-drs .census.e-con > .e-con{width:100%!important}
}
.bhp-drs .census .chart img{border:1px solid rgba(247,242,231,.14);background:rgba(247,242,231,.04)}
.bhp-drs .census .statrow{border-top:0}
/* 05 four stats across */
.bhp-drs .statrow.four.e-con{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
.bhp-drs .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important}
.bhp-drs .side-panel .elementor-heading-title b{font-family:var(--body);font-weight:600}
.bhp-drs .side-panel.dark .elementor-heading-title b{color:var(--gold)}
.bhp-drs .side-panel.cream .elementor-heading-title b{color:var(--gold-deep)}
/* 07 seven services as a ledger: Elementor grid containers need the tracks spelled out, and the row
   must not inherit the card skin */
.bhp-drs .svcledger.e-con{padding:0}
.bhp-drs .svcrow.e-con{display:grid!important;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr)!important;
  align-items:start!important;column-gap:clamp(20px,3vw,56px)!important;row-gap:10px!important}
.bhp-drs .svcrow .svcname .elementor-heading-title{transition:color .2s ease}
.bhp-drs .svcrow.e-con:hover .svcname h3 .elementor-heading-title{color:var(--gold-deep)}
.bhp-drs .svctext .elementor-widget-text-editor p{max-width:66ch}
/* the proof cards keep the card hover; they are the only .svc left on the page */
.bhp-drs .svcgrid .svc.e-con{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bhp-drs .svcgrid .svc.dark.e-con:hover{box-shadow:0 26px 60px rgba(0,0,0,.28);border-color:rgba(255,176,0,.5)}
/* 08 twelve levels of care: six rows per column, hairlines aligned across both */
.bhp-drs .sysgrid.six.e-con{display:grid!important;grid-template-columns:1fr 1fr!important;
  grid-template-rows:repeat(6,auto)!important;grid-auto-flow:column!important;
  column-gap:clamp(40px,4.6vw,76px)!important;row-gap:0!important}
.bhp-drs .sysgrid.six .sysitem.e-con:nth-child(5){
  border-top:1px solid var(--line-light)!important;padding-top:clamp(16px,2vh,20px)!important}
.bhp-drs .sysgrid.six .sysitem.e-con:nth-child(7){border-top:0!important;padding-top:4px!important}
.bhp-drs .sysgrid .sysitem .elementor-heading-title{transition:color .2s ease}
.bhp-drs .sysgrid .sysitem.e-con:hover h3 .elementor-heading-title{color:var(--gold-deep)}
.bhp-drs .sysgrid .sysitem .elementor-widget-text-editor p{max-width:46ch}
/* 12 the H3 inside the copy column, and the two approved cross-silo links */
.bhp-drs .sec-navy .ecol .subh .elementor-heading-title,
.bhp-drs .sec-deep .ecol .subh .elementor-heading-title{color:#fff}
.bhp-drs .sec-navy .ecol a,.bhp-drs .sec-deep .ecol a{color:#fff;text-decoration:underline;
  text-decoration-color:rgba(255,176,0,.6);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color .2s ease}
.bhp-drs .sec-navy .ecol a:hover,.bhp-drs .sec-deep .ecol a:hover{text-decoration-color:var(--gold)}
/* the testimonial headshot is a fixed circle, not the width of its flex cell */
.bhp-drs .tq img{width:46px!important;height:46px;object-fit:cover;border-radius:999px}
.bhp-drs .tq .elementor-widget-image{width:auto;flex:0 0 auto}
/* the support line under the final CTA: a page-level p rule would otherwise win over the widget colour */
.bhp-drs .cta-core .support p{color:rgba(247,242,231,.56)}
/* 19 a three-up team row, bios centred so the leftover space is not all at the bottom */
.bhp-drs .teamgrid.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.bhp-drs .teamgrid.three .tbody{justify-content:center}
@media (max-width:1100px){
  .bhp-drs .statrow.four.e-con{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:900px){
  /* the ledger stacks: name over copy, hairlines still separating the services */
  .bhp-drs .svcrow.e-con{grid-template-columns:1fr!important}
  .bhp-drs .svctext .elementor-widget-text-editor p{max-width:none}
  .bhp-drs .sysgrid.six.e-con{grid-template-columns:1fr!important;grid-template-rows:none!important;
    grid-auto-flow:row!important}
  .bhp-drs .sysgrid.six .sysitem.e-con:nth-child(7){
    border-top:1px solid var(--line-light)!important;padding-top:20px!important}
  .bhp-drs .teamgrid.three.e-con{grid-template-columns:1fr!important}
}
@media (max-width:700px){
  .bhp-drs .census .statrow.three.e-con{grid-template-columns:1fr!important}
  .bhp-drs .statrow.four.e-con{grid-template-columns:1fr!important}
}