/* ============================================================
   Changes Counseling Services LLC. DEFERRED CSS.
   Preloaded and swapped in by includes/head.php. Everything below the fold.
   Tokens and the band colours live in critical.css.
   ============================================================ */

/* ============================================================
   DESKTOP SHELL
   The site shipped mobile-only: --maxw was the ONLY width, so on a 1440px
   screen every band was a 608px ribbon down the middle. `.wrap.-wide` opens a
   section to --shell while its own running prose stays at the measure, which
   is what stops "wider" from becoming "harder to read". Grids inside each
   section are declared next to that section's other rules, not here.
   Mobile-first throughout: min-width only, so nothing below 64rem changes.
   ============================================================ */
@media(min-width:64rem){
  .wrap.-wide{max-width:var(--shell)}
  .wrap.-wide>h2,
  .wrap.-wide>h3,
  .wrap.-wide>p{max-width:var(--maxw)}
  /* A section heading that introduces a full-width grid below it should not be
     capped to the measure of a column it does not belong to. */
  .wrap.-wide>h2{max-width:22ch}
}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.8rem,7vw,2.7rem);line-height:1.2;
  margin:2.5rem 0;
}

/* ---------- cost toggle, the tactile moment ---------- */
.cost{margin-top:2rem}
/* grid, not flex-wrap: three equal columns never break to a second row */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-bottom:0}
.tab{
  display:flex;align-items:flex-end;justify-content:center;text-align:center;
  background:transparent;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--cream-mute);
  line-height:1.25;padding:.8rem .25rem;min-height:3.4rem;
  border-bottom:2px solid rgba(244,241,228,.22);
  transition:color .18s ease,border-color .18s ease;
}
.tab:hover{color:var(--cream-tx)}
/* motif use 3: the selected tab is underlined by the rachis, in her real pink.
   5.07:1 on pine, which clears 3:1 for a state indicator. */
.tab[aria-selected="true"]{
  color:var(--cream-tx);border-bottom-color:transparent;
  background-repeat:no-repeat;background-position:bottom;background-size:100% 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M 0,4.3 C 40,1.5 80,6.5 120,1.6' fill='none' stroke='%23EEA8C3' stroke-width='2'/%3E%3C/svg%3E");
}
.panel{padding:1.75rem 0 .25rem;animation:rise .32s ease both}
.panel[hidden]{display:none}
/* .panel .figure, not .figure: `.panel p` below would otherwise out-specify it
   and the pink would silently render as cream. */
.panel .figure{
  font-family:var(--display);font-weight:600;
  font-size:clamp(3.2rem,14vw,4.6rem);line-height:1;
  color:var(--pink);            /* 5.07:1 on pine. Large text and deep bands only. */
  margin:0 0 1.15rem;
}
.panel .figure small{font-size:.28em;font-family:var(--sans);font-weight:600;
  color:var(--cream-tx);display:block;letter-spacing:.02em;margin-top:.55rem}
.panel p{margin:0;color:var(--cream-tx)}
.panel .sub{color:var(--cream-mute);font-size:.95rem;margin-top:.9rem}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- fees and payment ---------- */
.pay{margin:2rem 0 0;border-top:1px solid rgba(35,41,31,.16)}
.pay div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid rgba(35,41,31,.16)}
.pay .what{margin:0;font-weight:600}
.pay .amt{margin:0;font-family:var(--display);font-size:1.5rem;font-weight:600;
  white-space:nowrap}
.pay-note{margin-top:1.25rem;color:var(--ink-mute);font-size:.98rem}
/* Desktop: picker left, full price list right. The rule above the list is the
   motif doing a job it cannot do on mobile, where the two are stacked and it
   would just be a divider. */
@media(min-width:64rem){
  .fees-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,4.5rem);
    align-items:start;margin-top:2.5rem;
  }
  .fees-grid .cost{margin-top:0}
  .fees-table .rule{margin-top:0}
  .fees-table .pay-note{max-width:30rem}
}
/* the fee table lives on pine, so its hairlines and its muted note invert */
.s3 .pay,.s4 .pay{border-top-color:rgba(244,241,228,.24)}
.s3 .pay div,.s4 .pay div{border-bottom-color:rgba(244,241,228,.24)}
.s3 .pay-note,.s4 .pay-note{color:var(--cream-mute)}

/* ---------- her portrait ----------
   She sits at the darkest point of the descent, so the portrait is the
   brightest object exactly where the person matters. Saturation 0.216 against
   0.187-0.237 for the interiors: one photograph set, not a graded set plus a
   real one. See art-direction.md, Photography. */
.portrait{margin:0 0 2rem}
.portrait img{width:100%;height:auto;border-radius:2px}
.portrait figcaption{margin-top:.7rem;font-size:.9rem;color:var(--cream-mute)}
/* 52rem, not 40rem. At 40rem a 15rem portrait plus the gap left the copy
   column at about 42 characters, which is under the comfortable measure and it
   showed: her longest paragraph broke to nine short lines. Below this the
   portrait sits above the copy at full width, which reads better than a
   cramped split. */
@media(min-width:52rem){
  .who{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2.25rem;align-items:start}
  .portrait{margin:0;position:sticky;top:2rem}
}
/* She is the reason somebody is on this section, so on desktop she gets real
   estate rather than a thumbnail: 20rem, and her copy still runs at the
   measure beside it. */
@media(min-width:64rem){
  .who{grid-template-columns:20rem minmax(0,var(--maxw));gap:clamp(3rem,7vw,5rem)}
  .portrait figcaption{font-size:.95rem}
}

/* ---------- credential rule ---------- */
.creds{
  display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;
  font-family:var(--sans);font-weight:600;letter-spacing:.09em;font-size:.85rem;
  text-transform:uppercase;padding-top:1.5rem;margin-top:2.25rem;
  border-top:1px solid rgba(244,241,228,.4);
}

/* ---------- specialties, a ruled list not a card grid ---------- */
.list{list-style:none;margin:2rem 0 0;padding:0}
.list li{padding:1.15rem 0;border-top:1px solid rgba(35,41,31,.16)}
.list li:last-child{border-bottom:1px solid rgba(35,41,31,.16)}
.list h3{margin:0 0 .2rem}
.list p{margin:0;font-size:.98rem;color:var(--ink-mute)}
/* Eight items in one column left half the band empty. Two columns, and the
   bottom rule moves from :last-child to the last item of EACH column or the
   left column ends on an open edge. */
@media(min-width:64rem){
  .list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,6vw,4rem)}
  .list li:last-child{border-bottom:0}
  .list li:nth-last-child(-n+2){border-bottom:1px solid rgba(35,41,31,.16)}
}

/* ---------- the office ----------
   Sources are 750px wide, so nothing displays wider than that and the softness
   never shows. Graded means sit slightly darker than the tan band, so they read
   as objects rather than holes. */
.rooms{display:grid;gap:1.25rem;margin:2rem 0 0;padding:0;list-style:none}
@media(min-width:33rem){.rooms{grid-template-columns:1fr 1fr}}
.rooms figure{margin:0}
.rooms img{width:100%;height:auto;border-radius:2px}
.rooms figcaption{margin-top:.55rem;font-size:.92rem;color:var(--ink-mute)}
.where{margin-top:2.25rem}
.where p{margin:0 0 .3rem}
.where .park{margin-top:1rem;color:var(--ink-mute);font-size:.98rem}
/* Four rooms, four across. The sources are 750px and the slot is ~16rem here,
   so index.php's sizes attribute names 16rem at this breakpoint and the
   browser serves the 500w file instead of the full one. */
@media(min-width:64rem){
  .rooms{grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem}
  /* Her four sources run 1.39:1 to 1.55:1, so side by side the frames ended at
     four different heights and the captions stepped down a staircase. 3:2 is
     inside that spread, so the crop is a few percent off the long edge and the
     row reads as one row. */
  .rooms img{aspect-ratio:3 / 2;object-fit:cover}
  .rooms figcaption{font-size:.88rem}
  /* Address left, the parking note beside it. The note is the longer of the
     two and it is the one people actually need before they drive over. */
  .where{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:0 clamp(2rem,5vw,3.5rem);margin-top:3rem;
  }
  .where h3{grid-column:1;margin:0 0 .55rem}
  .where p{grid-column:1}
  .where .park{grid-column:2;grid-row:1 / -1;margin:0;align-self:start}
}

/* ---------- steps ---------- */
.steps{list-style:none;margin:2.25rem 0 0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 1.75rem 3.25rem;counter-increment:s}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-.1rem;
  font-family:var(--display);font-size:1.9rem;font-weight:600;color:var(--ink);
  width:2.25rem;text-align:left;
}
/* motif use 4: each step number sits on a short arc of the same curve */
.steps li::after{
  content:"";position:absolute;left:0;top:2.5rem;width:2.1rem;height:8px;
  background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M 0,4.3 C 40,1.5 80,6.5 120,1.6' fill='none' stroke='%237F2F4F' stroke-opacity='.55' stroke-width='2'/%3E%3C/svg%3E");
}
.steps h3{margin:0 0 .2rem}
.steps p{margin:0;color:var(--ink-mute)}
/* Three steps, three across. They are a sequence read left to right, which is
   what the numbers are for, and stacked on desktop they read as three
   unrelated paragraphs. */
@media(min-width:64rem){
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,3.5rem);margin-top:2.5rem}
  .steps li{padding:0 0 0 3.25rem}
  .steps-head{margin-top:.5rem}
}

/* ---------- confidentiality ---------- */
.private{margin-top:2.5rem;padding:1.4rem;background:rgba(35,41,31,.05);
  border:1px solid rgba(35,41,31,.16)}
@media(min-width:64rem){
  .private{margin-top:3.5rem;padding:2rem 2.25rem;max-width:46rem}
}
.private h3{margin:0 0 .5rem}
.private p{margin:0 0 .8rem}
.private p:last-child{margin:0}
.private .hers{font-family:var(--display);font-size:1.12rem;line-height:1.5}

/* ---------- faq ---------- */
.faq{margin-top:2rem;border-top:1px solid rgba(35,41,31,.16)}
.faq details{border-bottom:1px solid rgba(35,41,31,.16)}
/* Nine questions in one column ran a very long way down a very wide band. Two
   columns, and the container's top rule moves onto the first item of each
   column, because a single border-top on the box only caps the left one. */
@media(min-width:64rem){
  .faq{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(2.5rem,6vw,4rem);border-top:0;margin-top:2.5rem;
  }
  .faq details:nth-child(-n+2){border-top:1px solid rgba(35,41,31,.16)}
  .faq summary{padding-right:2.5rem}
}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.25rem 1.15rem 0;position:relative;
  font-weight:600;font-size:1.05rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.55rem;
  width:.6rem;height:.6rem;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg);transition:transform .2s ease;opacity:.6;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 1.3rem;margin:0;color:var(--ink-mute)}

/* ---------- form ----------
   The only conversion point on the page, so the controls are drawn rather than
   left to the browser. font-size 16px on the inputs is not a taste choice: iOS
   Safari zooms the viewport on focus at anything smaller. */
.form{margin-top:2.25rem}
.field{margin-bottom:1.25rem}
label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.45rem}
label .opt{font-weight:400;color:var(--ink-mute)}
input,textarea,select{
  width:100%;font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  padding:.95rem 1rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-mute);opacity:1}
textarea{min-height:6.5rem;resize:vertical}
/* Focus was border-color alone, a one-pixel change nobody sees. The ring is
   drawn with box-shadow so it costs no layout and cannot shift the field. */
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(34,48,28,.18);
}
/* The select was the odd one out: a raw native control sitting next to four
   drawn ones. Same fill, same border, same padding, and its own chevron in
   --ink-mute so the arrow belongs to the palette instead of the OS. */
select{
  appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' fill='none' stroke='%234C5540' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
}
/* Named on the field, not just in the summary line above the button, so the
   person can see which box to fix. script.js sets and clears the attribute. */
input[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--err);box-shadow:0 0 0 3px rgba(138,42,30,.14);
}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--err);font-weight:600;margin:.25rem 0 1rem}
.form-note{font-size:.9rem;color:var(--ink-mute);margin:.55rem 0 0;line-height:1.55}
/* The confirmation replaces the form, so it carries the form's weight. */
.ok{
  background:var(--paper);border:1px solid rgba(35,41,31,.25);
  padding:2rem 1.75rem;margin-top:1rem;
}
.ok h3{margin:0 0 .5rem;font-family:var(--display);font-size:1.75rem;font-weight:600}
.ok p{margin:0;color:var(--ink-mute)}
.ok a{font-weight:600;text-underline-offset:3px}
.callout{
  margin-top:2rem;padding:1.6rem;background:rgba(35,41,31,.05);
  border:1px solid rgba(35,41,31,.16);
}
.callout h3{margin:0 0 .35rem}
.callout p{margin:0 0 .8rem;color:var(--ink-mute);font-size:.98rem}
.callout a.tel{font-family:var(--display);font-size:1.9rem;font-weight:600;
  text-decoration:none;display:inline-flex;line-height:1.15}
.callout a.tel:hover{text-decoration:underline;text-underline-offset:5px}
.callout-hours{margin:.9rem 0 0!important;font-size:.92rem}

/* Name and phone are short and they belong together. Everything else stays
   full width: the message box needs the room and the time picker looks
   stranded next to it. */
@media(min-width:33rem){
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
}
/* Desktop: the form and the "rather just call?" card side by side, so the two
   ways of reaching her are one decision rather than a scroll apart. */
@media(min-width:64rem){
  .close-grid{
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(2.5rem,6vw,4.5rem);align-items:start;margin-top:3rem;
  }
  .close-grid .form{margin-top:0}
  .callout{margin-top:0;padding:2rem;position:sticky;top:2rem}
  .close-grid .btn{width:auto;min-width:16rem}
}

/* ---------- GET UP band ----------
   Her second brand, deliberately NOT in this site's palette. GET UP has its own
   identity (hot pink, chrome, MOVE | MIND | MOTIVATE) and folding it into the
   greens would flatten both. It sits after the close so the practice converts
   first.
   #0B0F09 rather than pure black: a near-black with a green cast, so the seam
   from cream arrives through forest instead of cutting. Her #EA317F measures
   4.83:1 here, so it stays real text rather than decoration.
   #FF93CE is deliberately absent. It measured dE2000 7.8 from her own feather
   pink, which is the worst zone there is: the eye reads one colour reproduced
   wrong rather than two colours doing two jobs. */
.getup{background:#0B0F09;color:var(--cream-tx);text-align:center}
.getup .eyebrow{color:var(--cream-tx);opacity:.75}
.getup-mark{max-width:min(24rem,78vw);margin:0 auto 1.75rem;height:auto}
.getup p{max-width:32rem;margin-left:auto;margin-right:auto}
.getup .pull{color:var(--cream-tx);font-size:clamp(1.5rem,5.6vw,2.1rem);
  margin:2rem auto;max-width:30rem}
.getup .pull b{color:#EA317F;font-style:normal;font-weight:600}
.getup-link{display:inline-flex;align-items:center;justify-content:center;
  margin-top:.5rem;color:var(--cream-tx);font-weight:600;
  text-underline-offset:4px;min-height:48px}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:1;background:var(--forest);color:var(--cream-tx);
  padding:clamp(3rem,9vw,4.5rem) var(--pad) calc(var(--bar) + 2.5rem);
}
/* motif use 5: a mirrored arc closes the loop the hero opened */
.foot-rule{
  height:14px;margin-bottom:2.25rem;background-repeat:no-repeat;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 14' preserveAspectRatio='none'%3E%3Cpath d='M 0,6.4 C 480,11.5 960,2.5 1440,11.2' fill='none' stroke='%23EEA8C3' stroke-width='1.25'/%3E%3C/svg%3E");
}
/* Mark plus live wordmark, the same split as the header. The full reversed
   lockup was a 190x190 square here and it dominated the band. */
.foot-brand{display:flex;align-items:center;gap:.85rem;margin-bottom:2.25rem}
.foot-brand img{width:auto;height:clamp(44px,11vw,54px)}
.foot-brand .brand-name{color:var(--cream-tx);font-size:1.35rem}
/* --pink is 1.2:1 on cream so the header wordmark uses --pink-ink. On forest
   that inverts: --pink-ink is unreadable and the real pink measures 5.4:1. */
.foot-brand .brand-sub{color:var(--pink)}

footer h3{font-family:var(--display);font-size:1.2rem;font-weight:500;margin:0 0 .75rem}
footer a{color:var(--cream-tx)}
.foot-grid{display:grid;gap:2rem;margin-bottom:2.5rem}
@media(min-width:40rem){.foot-grid{grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem}}
.foot-grid p{margin:0;color:var(--cream-mute);font-size:.98rem}
/* Footer links measured 22px tall, which is under WCAG 2.2's 24px floor even
   with a mouse, so they get a small block padding at every size. The full 44px
   target only lands on TOUCH, where people tap them: applying it everywhere is
   what made the desktop footer look loose. The credit link in .legal stays
   inline either way, because it sits inside running prose and padding it out
   would break the sentence. */
.foot-grid a{display:inline-flex;align-items:center;min-height:26px;text-underline-offset:3px}
.foot-grid a:hover{text-decoration:underline}
@media(pointer:coarse){
  .foot-grid a{min-height:44px}
  .callout a.tel{min-height:44px;align-items:center}
}

/* The one block on this page that has to be findable in a hurry, so the NUMBER
   carries the emphasis rather than a stripe of colour down the side. 988 is set
   in the display face at 1.9rem inside the running sentence: it is the thing
   somebody is scanning for, and it is a tel: link so it dials on a phone.
   Its own inset fill separates it from the fee copy above without a border. */
.crisis{
  margin:0;padding:1.3rem 1.4rem;background:rgba(11,15,9,.32);
  font-size:.95rem;color:var(--cream-mute);max-width:44rem;
}
.crisis strong{color:var(--cream-tx);font-weight:600}
.crisis .line{
  display:block;font-family:var(--display);font-size:1.9rem;font-weight:600;
  line-height:1.1;color:var(--pink);      /* 5.4:1 on this fill, large text */
  text-decoration:none;margin:.35rem 0 .5rem;
}
.crisis .line:hover{text-decoration:underline;text-underline-offset:5px}
.legal{
  margin-top:2rem;padding-top:1.35rem;border-top:1px solid rgba(244,241,228,.2);
  font-size:.82rem;color:var(--cream-mute);max-width:44rem;line-height:1.6;
}
.legal a{text-underline-offset:3px}

/* ---------- sticky bar ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:1fr 1fr;
  background:#1B2617;border-top:1px solid rgba(244,241,228,.16);
  transform:translateY(105%);transition:transform .3s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky.show{transform:none}
.sticky a{
  display:flex;align-items:center;justify-content:center;
  padding:1.05rem .5rem;text-decoration:none;font-weight:600;
  font-size:1rem;color:var(--cream-tx);min-height:48px;
}
.sticky a.primary{background:var(--cream-tx);color:var(--forest)}
/* A thumb-reach pattern. On a desktop with a mouse the header phone and the
   in-page CTAs are already there, and a fixed bar just eats the viewport and
   forces the footer's bottom padding. Gone, and the padding goes with it. */
@media(pointer:fine) and (min-width:64rem){
  .sticky{display:none}
  footer{padding-bottom:clamp(3rem,9vw,4.5rem)}
}

@media(prefers-reduced-motion:reduce){
  .portrait{position:static}
}