/* ============================================================
   ADDITIONS TO THE BASE STYLESHEET
   Same rules as site.css: every value is a token, no hard coded
   hex, no box-shadow outside :focus-visible.
   ============================================================ */

/* ---------- header ----------------------------------------------------
   QA. The base caps the header at 1520px, so its content box is fixed at
   1344px however wide the display is. Brand 244 + nav 499 + call block 750
   needs 1541, which overlapped by a constant 74px at every width above the
   1490 breakpoint. The hours strip is dropped and the button label shortened,
   and the whole row is a wrapping flex so no future content change can make
   two children paint on top of each other again. */
.hdr{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.hdr .brand{margin-right:auto}
.hdr .site-nav{flex:0 1 auto}
.hdr .hdr-call{flex:none;margin-left:0}
.tel .hrs{display:none}
/* The nav shows from 1340 rather than 1261, and the phone number leaves the
   bar wherever the nav is in it.

   The header's content box is fixed at 1344px by the 1520px cap, so this is
   arithmetic rather than taste. Nav 503 plus the phone and button block 424
   leaves 369 for the lockup at the very widest, and that assumed a 244px logo:
   at 1261 it left 110, which nothing could have fitted. The old numbers only
   worked because the logo was small, and the whole point of this change is
   that it is not any more.

   So the phone number comes out of the row that has the nav in it. It is still
   in the footer, on the fixed call bar on phones, and in the call to action on
   every page, and the booking button, which is the thing the practice actually
   wants pressed, stays. That buys about 200px and puts real slack in a bar
   that has been one nav label away from breaking for weeks. */
@media(min-width:1360px){
  .navtoggle{display:none}
  .hdr-call .tel{display:none}
  /* the base sets order:2 on the call block and order:3 on the nav for its
     collapsed layout. Reset both, or the phone number paints before the nav. */
  .site-nav{display:block;width:auto;order:1}
  .hdr-call{order:2}
  .site-nav ul{flex-direction:row;align-items:center;gap:var(--s-4);border-top:0;padding-top:0}
  .site-nav li{width:auto}
  .site-nav a{display:inline-block;width:auto;padding:var(--s-3) 0}
}
@media(max-width:1359px){
  .navtoggle{display:inline-flex;order:3}
  .site-nav{display:none;width:100%;order:4}
  .site-nav[data-open="true"]{display:block}
  .hdr-call{order:2}
  .hdr-call .btn{display:none}
}

/* ---------- split hero ------------------------------------------------ */
.hero--split{padding-bottom:0}
.hero--split .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);
  gap:var(--s-8);align-items:center}
.hero--split .hero__fig{margin:0;align-self:stretch;display:flex}
.hero--split .hero__fig img{width:100%;height:100%;min-height:clamp(380px,52vh,620px);
  object-fit:cover;display:block;border-radius:var(--radius);background:var(--ink-100)}
.hero--split .hero__copy{padding-bottom:var(--s-8)}
/* the copy column is narrower than a full measure, so the CTA pair is given a
   tighter gutter rather than being allowed to break onto two rows */
.hero--split .btns{gap:var(--s-3)}
.hero--split .btns .btn{padding-left:var(--s-5);padding-right:var(--s-5)}
@media(max-width:1160px){
  .hero--split .hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
  .hero--split .hero__copy{padding-bottom:0}
  .hero--split .hero__fig img{min-height:clamp(260px,42vh,380px)}
  .hero--split{padding-bottom:var(--s-8)}
}
.hero .kicker{margin-bottom:var(--s-4)}
.hero .rule{width:64px;height:2px;background:var(--brown-200);margin:0 0 var(--s-6)}

/* ---------- the note under a button row -------------------------------
   QA. This had a top margin only inside .hero, so on twenty pages the line
   under the green CTA butted straight against the buttons. */
.note{font-family:var(--sans);font-size:var(--t-c);color:var(--ink-500);
  margin-top:var(--s-5);max-width:56ch}
.on-dark .note,.panel-green .note{color:var(--green-100)}
.btns+.note{margin-top:var(--s-5)}

/* ---------- link rows -------------------------------------------------
   QA. These were an inline-flex with a gap, so on a wrapping label the arrow
   became its own flex line and floated off on its own. It is now bound to the
   label with a non breaking space, and inside a cell the row is a vertical
   list on a hairline so cells of unequal prose still line their links up. */
.linkrow{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin:var(--s-5) 0 0;
  padding:0;list-style:none}
/* QA. This was an inline-flex, which makes the label and the arrow separate
   flex items that wrap independently of each other. The non breaking space in
   the markup could not bind them because flex layout ignores it. Plain inline
   block, and the nbsp does its job. */
.linkrow a{font-family:var(--sans);font-size:var(--t-s);font-weight:600;
  color:var(--green-700);text-decoration:none;display:inline-block;
  padding-top:calc((var(--touch-min) - 1.5em) / 2);
  padding-bottom:calc((var(--touch-min) - 1.5em) / 2);line-height:1.5}
.linkrow a:hover{text-decoration:underline;text-underline-offset:4px}
.linkrow .ar{white-space:nowrap;display:inline-block;
  transition:transform var(--m-quick) var(--e-out)}
.route .linkrow a{padding:var(--s-2) 0}
.linkrow a:hover .ar{transform:translateX(3px)}
.on-dark .linkrow a{color:var(--green-300)}

.route .linkrow{margin-top:auto;margin-bottom:0;flex-direction:column;gap:0;
  border-top:1px solid var(--rule);padding-top:var(--s-2);width:100%}
.route .linkrow li{width:100%}
.route .linkrow a{font-size:var(--t-c);width:100%;padding:var(--s-2) 0}
.routes .route > p:last-of-type{margin-bottom:var(--s-5)}

/* ---------- boxed list cells -----------------------------------------
   Will writes lists as "Label. Explanation." Three or more in a row is a
   list, and a list is a boxed grid rather than prose floating in whitespace.
   --fill lets the last cell close a short final row. */
.routes--list .route{padding:var(--s-5) var(--s-6) var(--s-6)}
.routes--list .rq{font-size:var(--t-h);line-height:1.22;margin-bottom:var(--s-3)}
.routes--list .route:hover{background:var(--bright)}
.panel-white .routes--list .route:hover,.panel-tint .routes--list .route:hover{background:var(--bright)}
.routes--fill > :last-child{grid-column:span var(--fill,1)}
@media(max-width:860px){.routes--fill > :last-child{grid-column:auto}}

/* ---------- chip rows -------------------------------------------------- */
.chips{margin:var(--s-5) 0}
.chips .lbl{font-family:var(--mono);font-size:var(--t-c);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-500);display:block;margin-bottom:var(--s-3)}
.on-dark .chips .lbl{color:var(--brown-200)}
.on-dark .payers li{border-color:rgba(250,243,233,.34);color:var(--green-100)}

/* ---------- pull quote ------------------------------------------------- */
.pull{margin:var(--s-6) 0;padding-left:var(--s-5);border-left:2px solid var(--brown-200);
  font-family:var(--serif);font-size:var(--t-bl);font-weight:300;line-height:1.5;
  color:var(--ink-700);max-width:52ch;text-wrap:pretty}
.pull p{font-family:var(--serif);font-size:inherit;color:inherit;margin:0}

/* ---------- FAQ. Ported from the gambling landing page so the site and the
   landing pages finally use the same component. Native details, so it works
   with no JavaScript and gets keyboard and screen reader support free. ---- */
.faq{margin-top:var(--s-6);border-top:1px solid var(--rule);max-width:78ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s-5) 46px var(--s-5) 0;
  position:relative;font-family:var(--serif);font-weight:500;font-size:var(--t-h);
  line-height:1.35;color:var(--bark);min-height:var(--touch-min)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-9px;border-right:2px solid var(--brown-600);border-bottom:2px solid var(--brown-600);
  transform:rotate(45deg);transition:transform var(--m-quick) var(--e-out)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:hover{color:var(--green-700)}
.faq__a{padding:0 0 var(--s-6);color:var(--ink-600);max-width:var(--measure)}
.faq__a p{font-family:var(--sans);font-size:var(--t-s);line-height:1.6;color:var(--ink-600)}
.faq__a p:last-child{margin-bottom:0}

/* ---------- measure --------------------------------------------------- */
.measure{max-width:var(--measure)}

/* ---------- side by side ----------------------------------------------
   QA. The base used 1fr, which is minmax(auto,1fr), so a wide child pushed
   the page 152px past the viewport. And the picture had a fixed height with
   no relationship to the copy beside it, so a 64 word section carried a
   picture twice as tall as its own text. The figure now takes the height the
   copy sets, with a floor so it can never become a sliver. */
.side{grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:stretch}
.side.left{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.side > div{align-self:start}
.sidefig{display:flex;flex-direction:column;height:100%}
.sidefig img{width:100%;height:100%;min-height:240px;max-height:520px;object-fit:cover;
  display:block;border-radius:var(--radius);background:var(--ink-100)}
.sidefig figcaption{flex:none}
@media(max-width:860px){
  .side,.side.left{grid-template-columns:minmax(0,1fr)}
  .sidefig img{min-height:220px;max-height:300px}
}

/* ---------- footer ----------------------------------------------------
   Sixteen service pages will not sit in a sitewide footer as a flat list, so
   they live behind a disclosure. Every link is still in the DOM and still
   crawled; the footer is simply not 960px tall any more. */
.site-footer .cols{grid-template-columns:1.5fr 1fr 1fr}
@media(max-width:900px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.site-footer .cols{grid-template-columns:1fr}}
.foot-disc{border-top:1px solid rgba(250,243,233,.18);
  border-bottom:1px solid rgba(250,243,233,.18);margin:var(--s-6) 0 0}
.foot-disc summary{cursor:pointer;list-style:none;position:relative;
  padding:var(--s-4) 40px var(--s-4) 0;font-family:var(--mono);font-size:var(--t-c);
  letter-spacing:.1em;text-transform:uppercase;color:var(--brown-200);
  min-height:var(--touch-min);display:flex;align-items:center}
.foot-disc summary::-webkit-details-marker{display:none}
.foot-disc summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  margin-top:-8px;border-right:2px solid var(--brown-200);border-bottom:2px solid var(--brown-200);
  transform:rotate(45deg);transition:transform var(--m-quick) var(--e-out)}
.foot-disc[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.foot-disc ul{columns:4;column-gap:var(--s-7);padding:0 0 var(--s-5);margin:0;list-style:none}
@media(max-width:1160px){.foot-disc ul{columns:3}}
@media(max-width:820px){.foot-disc ul{columns:2}}
@media(max-width:520px){.foot-disc ul{columns:1}}
.foot-disc li{break-inside:avoid;margin-bottom:var(--s-2)}
.site-footer li a{display:inline-block;padding:var(--s-1) 0}
.site-footer li{margin-bottom:var(--s-2)}

/* ---------- booking form ---------------------------------------------- */
.form{max-width:none}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media(max-width:640px){.form .row2{grid-template-columns:1fr}}
.form textarea{min-height:120px;resize:vertical}
.form .actions{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  margin-top:var(--s-6)}
.form .legal{padding-top:0;font-family:var(--sans);font-size:var(--t-c);
  color:var(--ink-500);max-width:60ch;margin:var(--s-5) 0 0}
.bookgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s-9);align-items:start}
@media(max-width:1160px){.bookgrid{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}}

/* ---------- table row headings ----------------------------------------
   QA. The base th rule was written for column headings, so a row heading in
   the body picked up mono, uppercase and the heavy rule. */
tbody th[scope="row"]{font-family:var(--sans);font-size:var(--t-s);font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--bark);white-space:normal;
  padding:var(--s-4) var(--s-5) var(--s-4) 0;border-bottom:1px solid var(--rule);
  vertical-align:top;line-height:1.5}

/* ---------- clinicians ------------------------------------------------- */
.clinicians.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.clinicians.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.clinicians.four{grid-template-columns:minmax(0,1fr)}}
.side .cred{font-family:var(--mono);font-size:var(--t-c);letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-700);margin:0 0 var(--s-5)}

/* ============================================================ MEASURE
   Will: "tons of padding on the right while we can extend text and make our
   pages shorter."

   He is describing a real gap rather than a preference. --measure was 66ch
   inside a 1104px content box, so every prose block ended around 690px and
   left roughly four hundred empty pixels down the right of all twenty four
   pages. On a section that is nothing but prose, that space is not doing
   anything except making the page longer.

   72ch rather than something larger: past about 75 characters the eye starts
   losing the start of the next line, and this site is read by people who are
   not at their best. 72 is the far end of comfortable, not past it. */
:root{ --measure:72ch; }

/* A lead-in sentence and the thing it introduces are one unit. Rendered as a
   .measure paragraph followed by a separate full width block, the sentence was
   left stranded in a narrow column with a gap under it, which is what Will
   screenshotted on the home page. Tighten the join so it reads as an
   introduction rather than as an orphan. */
.measure + .routes,
.measure + .cards,
.measure + .figs,
.measure + ul.linkrow,
.measure + .side{ margin-top:var(--s-5) }
.measure > p:last-child{ margin-bottom:0 }

/* A lead-in that ends in a colon is pointing at what follows. It should never
   be the last thing before a break. */
.measure p:last-child:not(:only-child){ margin-bottom:0 }

/* ============================================================ SERVICES MENU
   Will: "All services to header, organized nicely." Eighteen pages is too many
   for a nav row, so they live behind one control, grouped the way the footer
   already groups them.

   A <details> rather than a scripted menu: it opens on click with no
   JavaScript, closes on Escape for free, and is announced correctly without
   any ARIA of ours. The script adds close-on-outside-click, which is the only
   behaviour details is missing. */
.hasmenu{position:relative}
/* 44px, because the site's own rule is a 44px minimum target on every
   breakpoint and this was 28. It is a mouse target on desktop, but the rule
   does not have an exception for that and neither should this. */
.mega > summary{display:flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;min-height:var(--touch-min);padding:6px 0;color:var(--ink-700);
  font:500 var(--t-c)/1 var(--sans)}
.mega > summary::-webkit-details-marker{display:none}
.mega > summary:hover,.mega[open] > summary{color:var(--green-700)}
.mega > summary svg{transition:transform var(--m-quick) var(--e-out)}
.mega[open] > summary svg{transform:rotate(180deg)}
.mega > summary:focus-visible{outline:2px solid var(--green-700);outline-offset:4px;
  border-radius:2px}
.mega > summary.is-current{color:var(--green-700);font-weight:600}

.megapanel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  z-index:60;background:var(--bright);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(42,36,32,.13);padding:var(--s-6);
  width:max-content;max-width:min(92vw,880px)}
.megagrid{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:var(--s-6)}
.megah{font:600 var(--t-m)/1 var(--sans);letter-spacing:var(--ls-m);text-transform:uppercase;
  color:var(--brown-600);margin:0 0 var(--s-4)}
.megacol ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.megacol a{color:var(--ink-700);text-decoration:none;font-size:var(--t-c);
  line-height:1.35;display:block}
.megacol a:hover{color:var(--green-700);text-decoration:underline;
  text-underline-offset:3px}
.megacol a[aria-current="page"]{color:var(--green-700);font-weight:600}

/* On a phone the nav is already a stacked panel, so the dropdown becomes part
   of that stack rather than a floating card over it. */
@media (max-width:1100px){
  .megapanel{position:static;transform:none;box-shadow:none;border:0;
    padding:var(--s-4) 0 var(--s-2) var(--s-4);max-width:none;width:auto;
    border-left:2px solid var(--rule)}
  .megagrid{grid-template-columns:1fr;gap:var(--s-5)}
}

/* ============================================================ WIDTH BALANCE
   Will: "tons of padding on the right while we can extend text and make our
   pages shorter."

   First attempt at this widened any .measure sitting above a grid or a figure
   row. It over-matched: a full prose block above the three photographs on the
   home page went to 110 characters a line, which is unreadable and worse than
   the gap it was fixing. Narrowed to the case it was actually for.

   A short lead-in above a box grid is a caption for that grid rather than a
   column of prose, so it should match the width of what it introduces. Capped
   so that even a long one cannot run past the point where the eye starts
   losing the beginning of the next line. */
.wrap > .measure:has(+ .routes),
.wrap > .measure:has(+ .cards){ max-width:92ch }
.wrap > .measure:has(+ .routes) > p,
.wrap > .measure:has(+ .cards) > p{ max-width:92ch }

/* A section that is nothing but prose. Here the measure is right and the
   container is wrong: 72ch of text inside a 1104px box puts every line hard
   left with a third of the page empty beside it. Narrowing the container puts
   the same text in the middle of the screen with even margins, which is what
   balanced means, and costs no readability at all. */
   Will, on the home page: "This section feels condensed. Widen a bit." He was
   looking at the four clinician cards, which were 161px wide inside a 914px
   box on a page whose content width is 1104. .clinicians was missing from the
   list below, so a section holding a four column grid of portraits was being
   treated as a section holding nothing but prose. Adding it takes the cards to
   about 228px, forty per cent wider, with all four still across. */
section > .wrap:not(:has(.routes,.cards,.figs,.side,table,.faq,.band,.strip,
                         .people,.bookgrid,.hero__fig,.chips,.payers,
                         .routes--list,.clinicians)){
  max-width:calc(var(--measure) + var(--margin) * 2);
}

/* ============================================================ LINKS TO BUTTONS
   Will: "I vote we never use plain links where buttons could be. Not enough
   contrast and makes the whole services section overwhelming." And twice more
   in the export, plus "just a reminder to make these real buttons".

   These stay <a> elements, because they navigate. Only the affordance
   changes. */
ul.linkrow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--s-3)}
ul.linkrow li{margin:0}
ul.linkrow a{display:inline-flex;align-items:center;gap:8px;
  min-height:var(--touch-min);padding:12px 20px;
  border-radius:var(--radius);text-decoration:none;
  background:var(--green-100);color:var(--green-700);
  font:600 var(--t-c)/1.25 var(--sans);
  border:1px solid transparent;
  transition:background-color var(--m-quick) var(--e-out),
             border-color var(--m-quick) var(--e-out)}
ul.linkrow a:hover{background:var(--bright);border-color:var(--green-700)}
ul.linkrow a:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
ul.linkrow .ar{transition:transform var(--m-quick) var(--e-out)}
ul.linkrow a:hover .ar{transform:translateX(3px)}
/* on the dark and green panels the wash would disappear */
.panel-green ul.linkrow a,.crisis ul.linkrow a{background:var(--bright);color:var(--green-700)}

/* ============================================================ ROUTE BOXES
   Will: "In general, let's separate these boxes so they don't blend together
   as much." They were a 1px grid gap over a shared rule, which reads as one
   ruled table rather than as separate cards. */
.routes{background:transparent;border:0;gap:var(--s-4)}
.route{border:1px solid var(--rule);border-radius:var(--radius);
  border-top:3px solid var(--green-700)}
.route:hover{background:var(--green-100);border-color:var(--green-500)}
/* the buttons were pinned to the bottom with margin-top:auto, which opened a
   dead gap in every card shorter than the tallest one in its row */
.route ul.linkrow{margin-top:var(--s-5)}
.route p:last-of-type{margin-bottom:0}

/* ============================================================ BULLETED LISTS
   Will asked for these seven times, twice adding "site-wide honestly". Whole
   sections were already lists written as paragraphs, so this is a change of
   form rather than of copy.

   The marker is a rule rather than a disc: at this type size a bullet dot
   sits visually below the cap height of a serif line and reads as debris. A
   short brown rule aligns with the first line and matches the section rules
   the rest of the site already uses. */
ul.blist{list-style:none;margin:0 0 var(--s-5);padding:0;
  display:grid;gap:var(--s-4);max-width:var(--measure)}
ul.blist li{position:relative;padding-left:var(--s-6);
  font-size:var(--t-b);line-height:var(--lh-body);color:var(--ink-700);
  text-wrap:pretty}
ul.blist li::before{content:"";position:absolute;left:0;top:.72em;
  width:18px;height:2px;background:var(--brown-500)}
/* the first sentence of an item names it, so it carries the weight */
ul.blist li{--x:0}
@media (max-width:560px){
  ul.blist li{padding-left:var(--s-5)}
  ul.blist li::before{width:12px}
}

/* Related, three across. Will: "this doesn't look great. Would be better as
   just 3 columns or 4 blocks." The default auto-fit was giving four narrow
   columns on some pages and two wide ones on others, so the same module
   looked different on every page it appeared on. */
.routes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.routes--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.routes--3{grid-template-columns:1fr}}

/* ============================================================ ASK DAVID
   Draft furniture. These are the places we changed copy because we could not
   trace it to anything the client told us, and they say what was removed and
   why. They are not site content and they must not survive launch, which is
   what the data-ask gate in qa2.py enforces.

   Styled to look like a note pinned to the page rather than part of it:
   hatched edge, mono label, and none of the type scale the site uses. If it
   ever looks like it belongs, somebody will leave it in. */
.askd{background:var(--brown-100);border-top:2px dashed var(--brown-500);
  border-bottom:2px dashed var(--brown-500)}
.askd .wrap{padding-top:var(--s-7);padding-bottom:var(--s-7)}
.askd .kicker{font-family:var(--mono);color:var(--brown-700)}
.askd h2{font-size:var(--t-h);margin-bottom:var(--s-4)}
.askd__l{margin:var(--s-6) 0 0;padding-left:var(--s-6);display:grid;gap:var(--s-5);
  max-width:var(--measure)}
.askd__l li{font-size:var(--t-s);line-height:1.6;color:var(--ink-700)}
.askd__l li::marker{font-family:var(--mono);color:var(--brown-600)}
.askd em{font-style:italic;color:var(--brown-700)}

/* ============================================================ BUG FIXES, 21 Aug
   Four faults, all in CSS I added earlier today.

   1. SERVICES PANEL, columns drawn over each other.
      The replica's nav sets white-space:nowrap on nav links, which is correct
      for a row of short items and wrong the moment those links live in a
      250px column. Five labels rendered at their full unwrapped width and
      drew straight over the next column. Measured: the pornography link was
      365px inside a 250px column at every width from 1280 to 1920. */
.megacol a{white-space:normal;overflow-wrap:break-word}
.megacol li{min-width:0}

/* 2. SERVICES PANEL, off the right of the screen at 1280.
      It was centred on its summary with translateX(-50%), and the summary
      sits far right, so the panel ran 310px past the viewport. Pinned to the
      right edge of the trigger instead, which is where a menu belongs when
      its trigger is on the right. */
.megapanel{left:auto;right:0;transform:none}
@media (min-width:1101px){
  .megapanel{max-width:min(88vw,860px)}
}

/* 3. GREEN LINK BUTTONS, no air around them.
      Converting these from plain links to buttons gave them a background,
      which exposed spacing that did not matter when they were text. They sat
      flush against the paragraph underneath. The row is a block in the flow
      now, with its own space above and below. */
ul.linkrow{margin:var(--s-5) 0 var(--s-6)}
ul.linkrow:last-child{margin-bottom:0}
p + ul.linkrow{margin-top:var(--s-4)}

/* 4. THE SAME BUTTONS INSIDE A GREEN ROUTE CARD.
      Three separate faults there, all from the button treatment being built
      for a cream ground and then used on a green one:
        - the hover fill was white on a pale green card, so a hovered button
          looked like a different component from the one beside it
        - the site's base link underline was still applied under the button
          label, and on a two line label it ran under both lines and collided
          with the arrow
        - the arrow was a separate flex item and wrapped onto its own line
      Inside a card the button becomes an outline on the card's own ground,
      which keeps one visual language instead of two. */
.route ul.linkrow{margin:var(--s-5) 0 0;gap:var(--s-2);flex-direction:column;
  align-items:flex-start}
.route ul.linkrow a{background:transparent;border-color:var(--green-700);
  padding:10px 16px;width:100%;text-decoration:none}
.route ul.linkrow a:hover{background:var(--green-700);color:var(--ground);
  border-color:var(--green-700)}
.route ul.linkrow a:hover .ar{transform:translateX(3px)}
/* the label and the arrow are one line that breaks as a unit, never a label
   on one line and an orphaned arrow on the next */
ul.linkrow a{text-decoration:none}
ul.linkrow a .ar{flex:0 0 auto;margin-left:auto;padding-left:10px}

/* One picture beside the copy rather than three under it. Centred against the
   text block, which is what "at the right and center of the text" means: the
   figure finds the middle of the paragraph column instead of sitting at its
   top or stretching to its full height. */
.side--mid{align-items:center}
.side--mid > div{min-width:0}
.side--mid figure{margin:0}
.side--mid img{width:100%;height:auto;display:block;border-radius:var(--radius)}
@media (max-width:860px){
  .side--mid{grid-template-columns:1fr}
  .side--mid figure{max-width:420px;margin-inline:auto}
}

/* The earlier QA fix set .side{align-items:stretch} and lands later in the
   cascade at equal specificity, so it was winning and the picture stayed
   pinned to the top of a very tall section. Raised so the centring actually
   applies, which is the whole of what was asked for. */
.side.side--mid{align-items:center}
.side.side--mid > figure{align-self:center}

/* .sidefig was built to stretch to the height of the copy beside it, which is
   right for the original side sections and wrong here: a picture that fills an
   860px column is not centred against the text, it IS the text's height. Give
   it its own natural size in this slot and let the column centre it. */
.side--mid .sidefig{height:auto;display:block}
.side--mid .sidefig img{height:auto;min-height:0;max-height:none;
  aspect-ratio:3/4;object-fit:cover}
/* Keep the portrait crop on a phone. Switching to 4:3 below 860 cut the top
   and bottom off every one of these: the jumper being held, the hands on the
   stair rail and the slot reels all lose their subject to a landscape crop.
   The picture stays 3:4 and is capped in width instead, so it sits under the
   copy at a sensible size rather than filling the screen. */
@media (max-width:860px){
  .side--mid .sidefig img{aspect-ratio:3/4}
  .side--mid figure{max-width:340px}
}
@media (max-width:480px){
  .side--mid figure{max-width:260px}
}

/* The hero column was 340px against roughly 700px of copy, which left the
   picture reading as a thumbnail beside its own section. Widened so the two
   carry comparable weight, which is what "aligned" means here.

   460px is the largest the figure can be before the copy column drops under
   60 characters a line, so this is the balance point rather than a taste
   call: any wider and the text starts paying for it. */
.side.side--mid{grid-template-columns:minmax(0,1fr) minmax(0,clamp(320px,42%,460px));
  column-gap:var(--s-8)}
/* Collapse below 1000 rather than 860. At 460px the figure was leaving the
   copy 228px wide at tablet, which is 22 characters a line and unreadable.
   Written at .side.side--mid rather than .side--mid because the widening rule
   above outranks the single class version and was beating the old collapse
   inside its own media query, which is how the two column layout survived
   down to 390px in the first place. */
@media (max-width:1000px){
  .side.side--mid{grid-template-columns:1fr}
  .side.side--mid figure{max-width:340px;margin-inline:auto}
}
@media (max-width:480px){
  .side.side--mid figure{max-width:260px}
}

/* The heading now lives inside the text column of this section, so it needs
   its own top margin removed: the grid supplies the space above it. */
.side--mid > div > h2:first-child{margin-top:0}

/* R3-02..05. A paragraph or bullet list that follows a boxed grid sat 3px
   under it, so the sentence read as a caption stuck to the last box rather
   than as the next thought. The grid supplies its own bottom edge but the
   following block carried margin-top:0, and p only ever declares a bottom
   margin, so nothing was pushing them apart.

   Space it by the same step the grid uses to separate itself from the
   paragraph above it, which keeps the section rhythm even rather than
   inventing a one off value here. */
.routes + p,
.routes + ul,
.pillars + p,
.pillars + ul{margin-top:var(--s-6)}

/* Orphan control.

   Copy was breaking with two words alone on a last line while the line above
   ran full width. On a site set this carefully that runt is the first thing
   the eye lands on, and it reads as a fault rather than as typography.

   text-wrap:pretty, which the base sheet already sets, only rescues a single
   stranded word. It left 351 runts across the 24 pages, measured at 1440 and
   1000. Balancing the block instead spreads the same words over the same
   number of lines evenly, so there is no scrap at the bottom, and brings that
   count to 53.

   Not one line, though, and it is worth saying why. Pulling a sentence like
   the anxiety intro onto a single line needs 105 characters of measure. That
   is half again the comfortable reading range and would leave that one
   paragraph visibly wider than every other paragraph on the page. Widening
   the measure from 72ch to 86ch across the site was tested and bought only 19
   more single line paragraphs out of 314, at that cost to all of them.

   Cards are deliberately left alone. Their column is around 250px, so
   balancing pulls the text off the right edge of the box and the card stops
   looking filled: average fill dropped from 64% to 57% when this was applied
   to everything. A short last line inside a narrow card is not the fault
   being described here. */
p, li, blockquote, .lt, figcaption{text-wrap:balance}
.route p, .route .lt, .route li,
.card p, .card .lt,
.pillars p, .pillars .lt{text-wrap:pretty}


/* ---------------------------------------------------- privacy and HIPAA page

   Thirteen facts in this notice are David's to state rather than ours to
   guess, and the standalone document handled that with [[CONFIRM: KEY]] codes
   listed once at the top. That works for a file emailed to a lawyer and not
   at all for a clinician reading the page and answering as he goes: the code
   is not the question, and the question was somewhere else.

   So each one is a numbered red block sitting in the sentence it belongs to,
   carrying the question in words. Red because it must be impossible to
   publish this page by accident with one still open. */
.need{display:block;margin:var(--s-4) 0;padding:var(--s-4) var(--s-5);
  background:var(--clay-100);border-left:4px solid var(--clay-600);
  border-radius:var(--radius);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--s-4);align-items:start}
.need__n{grid-row:1/3;width:26px;height:26px;border-radius:50%;
  background:var(--clay-600);color:var(--ground);
  font:600 13px/26px var(--sans);text-align:center;flex:none}
.need__b{display:block;min-width:0}
.need__k{display:block;font:600 var(--t-c)/1.35 var(--sans);
  letter-spacing:.02em;color:var(--clay-600);margin-bottom:4px}
.need__x{display:block;font-size:var(--t-s);line-height:1.55;color:var(--ink-700)}
/* the second and third time the same answer is wanted, say so rather than
   asking again: thirteen questions asked nineteen times reads as nineteen */
.need--again{background:transparent;border-left-style:dashed;padding-block:var(--s-3)}
.need--again .need__n{background:transparent;color:var(--clay-600);
  border:1.5px solid var(--clay-600);line-height:23px}

.needs{background:var(--clay-100);border-top:2px solid var(--clay-600);
  border-bottom:1px solid var(--rule)}
.needs .kicker{font-family:var(--mono);color:var(--clay-600)}
.needs h2{margin-bottom:var(--s-4)}
.needs__l{list-style:none;margin:var(--s-6) 0 var(--s-5);padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--s-3) var(--s-5)}
.needs__l a{display:flex;gap:var(--s-3);align-items:baseline;
  font-size:var(--t-s);color:var(--ink-700);text-decoration:none;
  padding:var(--s-2) 0;border-bottom:1px solid var(--rule)}
.needs__l a:hover{color:var(--clay-600)}
.needs__l b{flex:none;width:22px;font:600 13px var(--mono);color:var(--clay-600)}

/* the header the rule requires, verbatim and prominent because 164.520 says
   prominent, not because it looks good in caps */
.mandate{border:2px solid var(--bark);background:var(--bright);
  padding:var(--s-5);margin:var(--s-6) 0;border-radius:var(--radius);
  font:600 var(--t-s)/1.5 var(--sans);letter-spacing:.02em;color:var(--bark)}
.pmeta{background:var(--brown-100);padding:var(--s-5);border-radius:var(--radius);
  margin-top:var(--s-6);font-size:var(--t-s)}
.pmeta dt{font-weight:600;color:var(--bark);margin-top:var(--s-3)}
.pmeta dd{margin:2px 0 0}
.pnav{background:var(--bright);border:1px solid var(--rule);
  border-radius:var(--radius);padding:var(--s-5);margin-top:var(--s-6)}
.pnav ol{margin:var(--s-3) 0 0;padding-left:var(--s-5)}
.pnav a{text-decoration:none}
.pnav a:hover{text-decoration:underline}
.prose h2{margin-top:var(--s-8)}
.prose h3{margin-top:var(--s-6)}
.prose .cite{display:block;font-size:var(--t-c);color:var(--ink-500);
  margin-top:var(--s-2)}

/* ============================================ READING CONTROLS: THEME AND SIZE

   Two things a reader can change, in the header on every page.

   The size control is not a nicety here. Will's copy deck says twice that the
   brain injury page carries the highest accessibility standard on the site and
   that body type is set one step larger there, and the design system already
   held the tokens for it: --t-b-a11y and --t-bl-a11y, with a .a11y-page hook
   in site.css that nothing had ever applied. This wires that up and gives the
   reader the control rather than deciding for them.

   Three steps rather than two. One step covers presbyopia and a tired reader.
   It does not cover somebody recovering from a brain injury, which is the
   audience this practice built the rule for, so there is a third.

   Everything scales off the tokens, so nothing here restates a size. A hard
   coded font-size anywhere in the sheet is a place this control stops working. */
:root[data-text="lg"]{
  --t-b:var(--t-b-a11y);      /* 22px, the step already in the design system */
  --t-bl:var(--t-bl-a11y);    /* 26px */
  --t-s:18.5px; --t-c:17px;
  --t-h:clamp(25px,2.8vw,32px);
}
:root[data-text="xl"]{
  --t-b:26px; --t-bl:31px; --t-s:22px; --t-c:20px; --t-min:18px;
  --t-h:clamp(28px,3.1vw,36px);
  --t-m:13px;
  /* Long lines are harder to track back at this size, not easier, so the
     measure comes in as the type goes up. This is the 66ch Will asked for on
     the brain injury page, arrived at from the other direction. */
  --measure:60ch;
  --lh-body:1.6;
}
/* The display sizes are already fluid and are set in vw, so they grow with the
   viewport and not with this control. Left alone on purpose: a headline that
   is comfortably large at the normal setting becomes a wall at the largest
   one, and it is the body copy people are struggling with. */

/* ---------------------------------------------------------------- dark mode
   The hues are the brand's own. Only lightness moves, and the roles swap:
   bark, which is the darkest ink in daylight, becomes the brightest. A dark
   theme built by inverting instead would have turned the greens muddy and the
   browns grey, and it would have stopped looking like this practice.

   Ground sits at #1C1815 rather than black. A pure black ground smears on an
   OLED panel when the page scrolls, and the warmth is what keeps it in the
   same family as the cream.

   Every pairing that carries text is checked in a11y_palette.py. All fifteen
   pass AA in both themes, the tightest being crisis text on its own tint at
   6.48:1 in the dark and 4.76:1 in the light. */
:root[data-theme="dark"]{
  --bark:#F2E9DC;
  --ink-700:#E6DACB; --ink-600:#CBBCAA; --ink-500:#A8998A;
  --ink-400:#8A7C6F; --ink-300:#5E554D; --ink-200:#3D3730; --ink-100:#2E2924;
  --ground:#1C1815; --bright:#252019;
  --green-700:#8FCBA8; --green-600:#7CB896; --green-500:#5E9A78;
  --green-300:#4A8664; --green-100:#25352C;
  --brown-700:#E0C3A9; --brown-600:#DABCA3; --brown-500:#B08A66;
  --brown-200:#7A5334; --brown-100:#312720;
  --clay-600:#E89A86; --clay-100:#3A241E;
  --rule:rgba(242,233,220,.16); --rule-strong:rgba(242,233,220,.34);
  color-scheme:dark;
}
/* Photographs are lit for a cream page. Held back very slightly so they do not
   glare out of a dark one, which is a comfort issue for the same readers the
   size control is for. Not enough to change what is in the picture. */
:root[data-theme="dark"] img:not([src$=".svg"]){filter:brightness(.92) contrast(1.02)}
/* The logo is drawn in the dark ink and disappears on a dark ground. The cream
   variant is what it is for. */
:root[data-theme="dark"] .brandmark img[src*="-green"],

/* ------------------------------------------------------------- the controls */
.rdg{display:flex;align-items:center;gap:var(--s-2)}
.rdg__b{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:0 11px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--rule-strong);color:var(--ink-600);
  font:600 12px/1 var(--sans);letter-spacing:.02em;
  transition:border-color var(--m-quick),color var(--m-quick),background var(--m-quick)}
.rdg__b:hover{border-color:var(--green-600);color:var(--green-700)}
.rdg__b:focus-visible{outline:3px solid var(--green-600);outline-offset:2px}
.rdg__b svg{width:15px;height:15px;flex:none}
/* The current step is shown, not implied. "A+" with nothing else on screen
   does not tell a reader whether they are already at the largest. */
.rdg__lv{font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--brown-600)}
:root[data-text="lg"] .rdg__t,:root[data-text="xl"] .rdg__t{
  border-color:var(--green-600);color:var(--green-700);background:var(--green-100)}

/* The tap target the rule asks for, without a 44px pill in the header on
   desktop: the box is padded out invisibly instead. */
.rdg__b::before{content:"";position:absolute;inset:-4px;border-radius:inherit}
.rdg__b{position:relative}

@media (max-width:900px){
  /* Below the point where the header collapses these move into the mobile
     panel, where they get full sized rows rather than pills. */
  .rdg{width:100%;gap:var(--s-3)}
  .rdg__b{flex:1;min-height:var(--touch-min);font-size:13px}
}
@media print{.rdg{display:none}}

/* Surfaces, which do not invert the way ink does.

   --green-700 is used two ways in the base sheet: as ink for links and kickers,
   and as a fill for .panel-green, .btn-primary and the mobile call bar. Those
   pull in opposite directions when the theme flips. Lightening it so links stay
   readable on a dark ground also turned the green band into a bright mint slab
   with dark brown text on it, which is both wrong to look at and a contrast
   failure: the audit caught it at 3.62:1 against a required 4.5 on twenty two
   pages.

   So the fill users get their own value. A token that is ink in one theme and
   a surface in the other has to be told which job it is doing. */
:root[data-theme="dark"]{--surface-green:#24503A}
:root[data-theme="dark"] .panel-green,
:root[data-theme="dark"] .callbar{background:var(--surface-green);color:var(--bark)}
/* The base sheet paints ink inside this band with --ground, which is cream in
   daylight and near black at night. Every one of those has to be named again
   or the heading disappears into the band: the audit had it at 1.92:1. */
:root[data-theme="dark"] .panel-green h2,
:root[data-theme="dark"] .panel-green h3,
:root[data-theme="dark"] .panel-green .lt,
:root[data-theme="dark"] .callbar a{color:var(--bark)}
:root[data-theme="dark"] .panel-green p{color:var(--ink-700)}
:root[data-theme="dark"] .panel-green a,
:root[data-theme="dark"] .callbar a{color:var(--brown-600)}
:root[data-theme="dark"] .panel-green .kicker{color:var(--brown-600)}
/* The primary button keeps a light fill in the dark, because an action has to
   read as the brightest thing in its group. Ink is the ground, which is the
   darkest value there is. */
:root[data-theme="dark"] .btn-primary{background:var(--green-700);color:var(--ground)}
:root[data-theme="dark"] .btn-primary:hover{background:var(--green-600)}
:root[data-theme="dark"] .btn-secondary{border-color:var(--ink-600);color:var(--bark)}
/* Bands that were already dark in daylight need their buttons relit rather
   than inverted: brown-200 is a dark brown here and was being used as text. */
:root[data-theme="dark"] .on-dark .btn-primary{background:var(--brown-600);color:var(--ground)}
:root[data-theme="dark"] .on-dark .btn-secondary{border-color:var(--brown-600);color:var(--brown-600)}

/* A link inside the green band was set in --green-300 on --green-700, which
   measures 4.36:1 against a required 4.5. It fails by a hair, it has been
   failing since before any of this, and it is the practice's email address on
   the home page, the fees page and the supervision page.

   Lifted along its own hue rather than swapped for another colour, so the band
   still looks like itself: same green, one step brighter, 4.78:1. The token is
   left alone because --green-300 is documented as 6.67:1 on bark and is
   correct there; it is this pairing that was wrong. */
.panel-green a{color:#89BFA1}

/* Placement of the reading controls.

   Third position, and the reasoning is in the moves. They started inside the
   header, which could not carry them: the two pills sat marooned between the
   logo and the nav and pushed the phone number and the booking button onto a
   line of their own. They then hung under the header as a tab, aligned to the
   booking button above them.

   Will: "I am not totally sure how I feel about the placement of the
   accessibility options. I think maybe bottom left would look better. Allow
   book a consultation to stand out." He is right about the cost. Anything
   directly under that button competes with it, and the booking button is the
   one thing on the page the practice actually needs pressed.

   So they leave the top of the page and dock at the bottom left, fixed rather
   than scrolling away: a reader who realises three screens down that the type
   is too small should not have to go back up for the control that fixes it.
   Opposite side from the review comment dock, so the two never meet. */
.rdgbar{position:fixed;left:var(--s-5);bottom:var(--s-5);z-index:60;
  pointer-events:none;height:auto}
.rdgbar > .wrap{max-width:none;padding:0;display:block}
.rdgbar__tab{pointer-events:auto;display:inline-flex;align-items:center;
  gap:var(--s-2);padding:6px 8px;
  background:var(--bright);border:1px solid var(--rule-strong);
  border-radius:999px;box-shadow:0 6px 20px rgba(42,36,32,.16)}
/* The words go. A floating control already carries weight on the page, and
   "READING OPTIONS" beside two pills makes it a third thing to read. The
   buttons still announce themselves in full to a screen reader. */
.rdgbar__lb{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:640px){
  /* The base sheet fixes the call bar across the bottom of a phone, so this
     sits above it rather than underneath it. */
  .rdgbar{left:var(--s-3);bottom:calc(56px + var(--s-3))}
  .rdgbar .rdg{width:auto;gap:6px}
  .rdgbar .rdg__b{flex:none;min-width:var(--touch-min);min-height:var(--touch-min);
    padding:0 10px}
  .rdgbar .rdg__b span:not(.rdg__lv){position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rdgbar .rdg__lv{font-size:10px;letter-spacing:.04em}
}
@media print{.rdgbar{display:none}}


/* ------------------------------------------------- Will, round three, home

   "Let's lock all of these buttons to the bottom maybe. Feels hectic like
   this." Nine cards in that grid and the links sat anywhere from 181px to
   439px down their own card, because each one followed however much text was
   above it. The cards are already equal height within a row, so the eye
   expects the links to line up and they did not.

   margin-top:auto on the last child does it: the card is already a flex
   column, so the spare space collects above the link instead of below it. */
.route{display:flex;flex-direction:column}
.route > :last-child{margin-top:auto}
/* The rule above would also push a lone paragraph away from its heading in a
   card that has no link at all, leaving the text floating at the bottom of an
   empty box. Only cards that end in something clickable get it. */
.route > :last-child:not(a):not(ul):not(.linkrow){margin-top:0}
.route > a:last-child,
.route > ul:last-child,
.route > .linkrow:last-child{margin-top:auto;padding-top:var(--s-4)}

/* Will: "I don't like this random line above 'what we work with'".
   There were two rules 32px apart with nothing between them: the base sheet
   puts a border-bottom on the footer columns, and the disclosure I added for
   the services list brought its own border-top. The upper one is the one with
   nothing under it, so it goes. */
.site-footer .cols{border-bottom:0}

/* Heading and its link row on one line. Used where a section's links belong
   with the heading rather than at the foot of the section, which on the home
   page meant nearly nine hundred pixels of portraits between the two. */
.sechead{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-5) var(--s-7);flex-wrap:wrap;margin-bottom:var(--s-5)}
.sechead h2{margin-bottom:0}
.sechead ul.linkrow{margin:0}
@media(max-width:760px){
  /* Stacked, and the links go under the heading rather than beside it. Two
     button width link rows side by side with a serif heading at this width
     leaves the heading two words wide. */
  .sechead{display:block}
  .sechead h2{margin-bottom:var(--s-4)}
}

/* ------------------------------------------------ the footer at night

   Carlos: "we're also losing contrast on TPA logo on the footer for night
   mode." The logo was the symptom. The whole footer was flipping.

   .site-footer paints itself with --bark, and --bark is the darkest ink by
   day and the brightest at night, so at night the footer became a cream slab
   across the bottom of a dark page with a cream logo sitting invisibly on it.
   Same fault as the green band earlier: a token doing one job as ink and
   another as a surface, and only one of those jobs wants inverting.

   The contrast audit passed it, because the text on that slab was dark and
   legible. It only checks whether text can be read, not whether a footer is
   supposed to be a footer. */
:root[data-theme="dark"] .site-footer{background:#141110;color:var(--ink-600)}
/* Everything inside was painted for a dark footer and then inverted with the
   rest of the page, so each one has to be told to stay light. */
:root[data-theme="dark"] .site-footer p{color:var(--ink-600)}
:root[data-theme="dark"] .site-footer a{color:var(--ink-700)}
:root[data-theme="dark"] .site-footer h2{color:var(--brown-600)}
:root[data-theme="dark"] .site-footer .legal{color:var(--ink-500)}
:root[data-theme="dark"] .site-footer .legal a{color:var(--ink-600)}
:root[data-theme="dark"] .foot-disc summary{color:var(--brown-600)}

/* ------------------------------------- the header does not grow with the type

   Carlos: "I'd also keep the header nav the same as font size increases."

   The size control moves --t-b and --t-s, and the header reads those, so at
   the largest step the nav grew with the body copy and started crowding the
   phone number and the booking button in a bar that is already full.

   The header is pinned to the sizes it was designed at. Worth being straight
   about the tradeoff: a reader who needs the largest body type gets no help
   from this control on the navigation. Browser zoom still scales everything,
   including this, which is the tool that exists for that case, and the nav is
   short link text rather than something anybody has to read at length. */
.site-header{--t-b:20.5px; --t-bl:25px; --t-s:17px; --t-c:16px;
  --t-m:11.5px; --t-h:clamp(23px,2.6vw,30px)}

/* ------------------------------------------------------ the header lockup

   Carlos: "the company name is barely readable, can we make it bigger?"

   It is not a scaling problem. "THE PSYCHOTHERAPY ASSOCIATES" already runs the
   full width of the canvas, so making the wordmark taller makes it wider, the
   canvas widens to hold it, and the header renders the logo at a fixed width,
   which shrinks it back down. Scaling it 1.25 that way moved the cap height
   from 6.65px to 7.10px: six per cent, for a change that reads as twenty five.

   So the lockup stays exactly as drawn and gets more room: 244px to 330px,
   which takes the wordmark from 6.7px to 9.0px cap height. Everything in the
   lockup grows together, mark included, which is what keeps it the logo rather
   than a rearrangement of it.

   The mobile size goes up in the same proportion. */


/* ============================================================ THE LOCKUP

   David: "Can you put 'of Oregon' under 'The Psychotherapy Associates'?"
   Then Carlos, on the first attempt: "OF OREGON looks terrible, must look
   something like this", with a reference.

   The reference is not the drawn wordmark with a line added underneath. It is
   a different lockup: the monogram beside two lines of letterspaced sans, the
   name in the ink colour and "of Oregon" in brown beneath it, both flush left
   to each other. So the outlined serif wordmark is not used here at all.

   Which solves the other problem in passing. The drawn wordmark is a fixed
   width image, and that is why the practice name was 6.7px tall in the header
   and could not be made bigger without widening the canvas and cancelling the
   gain. As type it is just type: it sizes to whatever the header can give it.

   The monogram is inlined and its path is fill="currentColor", so it takes the
   theme's colour with no second artwork file to maintain. */
.brand{align-items:center;gap:clamp(9px,1vw,13px)}
.brand__mark{display:block;flex:none;color:var(--green-700);line-height:0}
.brand__mark svg{display:block;height:clamp(26px,2.4vw,33px);width:auto}
:root[data-theme="dark"] .brand__mark{color:var(--bark)}

.brand__name{display:block}
.brand__l1,.brand__l2{display:block;font-family:var(--sans);font-weight:700;
  line-height:1;white-space:nowrap;text-transform:uppercase}
/* Sized against the room the bar actually has, which is not the viewport.

   .site-header .wrap is capped at 1520px, so above about 1500 the header stops
   getting wider no matter how wide the screen is. Its content box is 1344px,
   the nav takes 503 and the phone and button 424, two gaps take 48, and what
   is left for the lockup is 369px. That is the number, at every desktop width.

   Twenty eight letterspaced capitals in 369px is 12px. The first version of
   this asked for 14 and wrapped the header onto three rows at 1920 as well as
   at 1440, which is how I found the cap.

   Below 1490 the base sheet hides the nav behind a menu button, which hands
   back 500px, so the lockup gets its comfortable size there instead. */
.brand__l1{font-size:12px;letter-spacing:.115em;color:var(--bark)}
.brand__l2{font-size:11px;letter-spacing:.30em;
  color:var(--brown-600);margin-top:.36em}

/* The header pins its own type against the reader's size control, and the
   lockup is type now, so it has to be pinned too or the practice name grows
   with the body copy and pushes the bar apart. */
:root[data-text] .brand__l1{font-size:12px}
:root[data-text] .brand__l2{font-size:11px}

@media(max-width:1359px){
  .brand__l1{font-size:13.5px}
  .brand__l2{font-size:12.5px}
  :root[data-text] .brand__l1{font-size:13.5px}
  :root[data-text] .brand__l2{font-size:12.5px}
  .brand__mark svg{height:32px}
}
/* Between the point where the menu button appears and the point where the
   fixed call bar takes the phone number off the header's hands, the bar is
   carrying a lockup, a toggle and a phone number in under 700px. The lockup
   goes to its compact size here rather than any of the three wrapping. */
@media(max-width:739px){
  .brand__l1{font-size:10px;letter-spacing:.07em}
  .brand__l2{font-size:9px;letter-spacing:.22em}
  :root[data-text] .brand__l1{font-size:10px}
  :root[data-text] .brand__l2{font-size:9px}
  .brand__mark svg{height:26px}
}
@media(max-width:640px){
  /* The header's own gutter comes in rather than the type going to nothing:
     at 390 the standard 48px each side leaves 226px for a lockup that needs
     270, and shrinking the name to fit that is how you end up back where
     David started. */
  .site-header .wrap{padding-left:16px;padding-right:16px}
  .brand__l1{font-size:10px;letter-spacing:.07em}
  .brand__l2{font-size:9px;letter-spacing:.22em}
  :root[data-text] .brand__l1{font-size:10px}
  :root[data-text] .brand__l2{font-size:9px}
  .brand__mark svg{height:24px}
  .brand{gap:8px}
  /* the header's own gap too, not just the one inside the lockup: at 375 the
     lockup and the menu button come to 327 in a 343 box, and the 24px between
     them is what tips it over */
  .hdr{gap:12px}
}
/* The small phones. 320 leaves a 288px box for a lockup and a menu button, so
   the name comes down again. It is still larger here than it was on a desktop
   before any of this. */
@media(max-width:400px){
  .brand__l1{font-size:8px;letter-spacing:.04em}
  .brand__l2{font-size:7px;letter-spacing:.16em}
  :root[data-text] .brand__l1{font-size:8.5px}
  :root[data-text] .brand__l2{font-size:7.5px}
  .brand__mark svg{height:20px}
  .brand{gap:6px}
  .hdr{gap:8px}
  .site-header .wrap{padding-left:12px;padding-right:12px}
}


/* ==========================================================================
   Phone pass, 31 August. Four things Carlos found on a real handset.
   ========================================================================== */

/* ---------- 1. the gutters were eating the screen ---------------------- --
   --margin steps 88 to 48 at 1024 and then stops, so a 390px phone spent 96px
   of 390, a quarter of the display, on empty side margins. That is a desktop
   number that nobody re-checked on a phone. The line length it produced was
   about 34 characters, which is short enough to make long copy feel like it
   never ends. */
@media(max-width:640px){
  :root{--margin:22px}
  /* the vertical rhythm was set for a screen four times as tall. 64px between
     sections on a phone reads as a gap rather than as a division. */
  section{padding:var(--s-7) 0}
  /* .wrap carries no vertical padding of its own except under .crisis and
     .askd, which are scoped. An unscoped rule here added 24px top and bottom
     to every wrap on every page, which is the opposite of the job. */
}
@media(max-width:380px){:root{--margin:18px}}

/* ---------- 2. the menu could not be scrolled -------------------------- --
   The header is sticky at top 0 and the nav lives inside it. Open Services and
   the header becomes 1563px tall on an 844px screen. A sticky element taller
   than the viewport pins at the top and everything past the fold is simply
   unreachable: the page scrolls, the menu does not, and two thirds of the
   service links cannot be got at by any gesture.

   So the open menu becomes its own scroll container, bounded by the viewport
   less the header above it and the call bar below it. dvh rather than vh
   because the address bar on a phone changes the answer. */
@media(max-width:1359px){
  .site-nav[data-open="true"]{
    max-height:calc(100dvh - 96px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:var(--s-4);
  }
}
@media(max-width:640px){
  /* the call bar is fixed across the bottom here, so the menu stops above it */
  .site-nav[data-open="true"]{max-height:calc(100dvh - 140px)}
  /* the panel is a card inside a scrolling list now, so it loses the inset
     that made it look like a floating menu on a desktop */
  .megapanel{padding:var(--s-4) var(--s-4) var(--s-2)}
  .megagrid{gap:var(--s-4)}
}

/* ---------- 3. the reading controls sat on top of the copy ------------- --
   Docked bottom left, fixed, above the call bar. On a desktop that is out of
   the way. On a phone it lands in the middle of the text column and covers a
   line and a half of body copy on every page, and it covers the service menu
   when that is open. It is a control for reading that makes the page harder to
   read, which is the wrong way round.

   On phones and tablets it moves inside the menu instead, at the bottom of the
   list, where it is findable, labelled, and covering nothing. src-extra.js does
   the moving; this is how it looks once it is there. */
.rdgbar--innav{
  position:static;left:auto;bottom:auto;z-index:auto;pointer-events:auto;
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid var(--rule);
}
.rdgbar--innav > .wrap{padding:0}
.rdgbar--innav .rdgbar__tab{
  background:transparent;border:0;box-shadow:none;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
}
/* in the menu it needs its name, where floating it did not */
.rdgbar--innav .rdgbar__lb{
  position:static;width:auto;height:auto;overflow:visible;clip:auto;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:var(--ls-m);
  text-transform:uppercase;color:var(--ink-500);flex:0 0 100%;margin-bottom:var(--s-2);
}

/* the split hero kept a desktop sized lid on a phone: 96px of nothing between
   a 73px header and the first word. */
@media(max-width:640px){
  .hero{padding-top:var(--s-6)}
  .hero--split{padding-bottom:0}
}

/* ---------- 4. the fee tables scroll sideways with nothing to say so ----- --
   Three tables are wider than a phone and sit in a container that scrolls
   horizontally, which is the right answer for a table of numbers: shrinking it
   to fit would make it unreadable. But a table that is cut off at the right
   edge with no seam looks like a table that is missing a column, and nobody
   swipes something they do not know can be swiped.

   A soft fade on the right edge, drawn only while there is more to see. */
@media(max-width:900px){
  .table-wrap{position:relative}
  .table-wrap::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
    pointer-events:none;
    background:linear-gradient(to right,rgba(250,243,233,0),var(--ground));
  }
  .panel-white .table-wrap::after{
    background:linear-gradient(to right,rgba(255,255,255,0),var(--bright));
  }
  :root[data-theme="dark"] .table-wrap::after{
    background:linear-gradient(to right,rgba(0,0,0,0),var(--ground));
  }
}

/* ---------- the clinician photograph belongs under the name ------------- --
   The row is a two column grid, copy and portrait, and at 860 it collapses to
   one column. It collapses in dom order, which puts the photograph after the
   whole biography: on a phone you read a name, then eight paragraphs, and only
   then find out what the person looks like. The photograph is doing
   introductions, so it has to come first.

   Below the h2, above the copy. order works because the parent is still a grid
   once it is one column wide. */
@media(max-width:860px){
  /* Scoped to the clinician rows by the credentials line only they carry. An
     unscoped rule also moved the decorative photograph on Fees and insurance
     above the fee copy, which nobody asked for on the page where the copy
     matters most.

     The selector has to be three classes deep to land, because the base sheet
     already resets .side.left .sidefig to order 0 at this width, which outranks
     anything shorter. Two of the four clinicians are .left, so a weaker
     selector fixed David and Cynthia and silently left Anita and Abby. */
  .side:has(.cred) > .sidefig{order:-1;margin-bottom:var(--s-5)}
  .side:has(.cred) .sidefig img{max-height:340px}
}

/* ---------- the privacy notice opened with 206px of nothing ------------- --
   Every other page puts a heading directly under the hero, so the hero's 64px
   bottom padding and the next section's 96px top padding read as one deliberate
   pause. The notice is the only page whose first section is a contents panel
   rather than a heading, and there the same arithmetic, 16 for the lead, 64 for
   the hero, 96 for the section and 32 for the panel, stacks into 206px of empty
   cream between the standfirst and the first thing you can act on.

   The two paddings are doing the same job twice, so the second one stands down
   on this page only. 206 to 112. */
.hero + .prose{padding-top:var(--s-6)}
.prose > .wrap > .pnav:first-child{margin-top:0}
@media(max-width:640px){
  .hero + .prose{padding-top:var(--s-5)}
}