/* =====================================================================
   GROUP SCALE v24 (October 2026)
   One type and spacing standard for every practice site in the group.
   The same file sits in each site and loads last,
   so the four sites read at the same size and rhythm on every screen.
   Brand colours, logos and headers stay in each site's own stylesheets.

   Desktop (1281px and up): fixed sizes.
   Laptops and tablets (761 to 1280px): headings shrink with the window,
     so a heading that fits on one line at 1280px still fits at 768px.
   Portrait tablets (761 to 960px): side-by-side columns stack.
   Phones (up to 760px): a layout of its own, left-aligned reading,
     phone type sizes, 36px between sections, nothing scrolls sideways.
   ===================================================================== */

/* ---------- desktop and tablet type ---------- */
@media (min-width:761px){
  .site.site .d1{font-size:min(52px,calc((100vw - 144px)*.0458))!important;line-height:1.06!important;letter-spacing:-.034em!important}
  .site.site .d2,.site.site .gh1,.site.site .hero .grid12 .d1{font-size:min(46px,calc((100vw - 144px)*.0405))!important;line-height:1.08!important;letter-spacing:-.032em!important}
  .site.site .h2,.site.site .cta-band .h2{font-size:min(36px,calc((100vw - 144px)*.0317))!important;line-height:1.12!important;letter-spacing:-.027em!important}
  /* a heading in a column beside a photo or list uses the column size */
  .site.site .grid12>div>.h2:not(.sh),.site.site .grid12>[style*="span 4"] .h2,.site.site .grid12>[style*="span 5"] .h2,.site.site .grid12>[style*="span 6"] .h2,
  .site.site .sech .h2,.site.site .rgh .h2,.site.site .pph .h2{font-size:min(30px,calc((100vw - 144px)*.0264))!important}
  .site.site .rowt .h2{font-size:min(32px,calc((100vw - 144px)*.0282))!important}
  .site.site .h3{font-size:clamp(20px,calc((100vw - 80px)*.0195),23px)!important;line-height:1.2!important}
  .site.site .h4{font-size:18px}
  .site.site .lede{font-size:clamp(17.5px,calc(13px + .45vw),19px)!important;line-height:1.45!important}
  .site.site .kick,.site.site .eyebrow{font-size:16px!important;margin-bottom:10px}
  .site.site .hero .kick{margin-bottom:12px}
  /* statements and big figures written into a page */
  .site.site p[style*="font-size:44px"],.site.site main [style*="font-size:44px"]{font-size:min(34px,calc((100vw - 144px)*.0299))!important;line-height:1.16!important}
  .site.site main [style*="font-size:120px"]{font-size:80px!important}
  .site.site main [style*="font-size:88px"]{font-size:64px!important}
  .site.site main [style*="font-size:72px"]{font-size:54px!important}
  .site.site main [style*="font-size:56px"]{font-size:44px!important}
  .site.site main [style*="font-size:52px"]{font-size:42px!important}
  .site.site main :is([style*="font-size:42px"],[style*="font-size:40px"]){font-size:32px!important}
  .site.site main [style*="font-size:38px"]{font-size:30px!important}
  /* cards */
  .site.site .feat :is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"])){font-size:26px!important}
  .site.site .feat1 h2{font-size:28px!important;line-height:1.14!important}
  .site.site .grp :is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"])){font-size:22px!important}
  .site.site .why :is(h4:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="4"])),.site.site .why :is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"])){font-size:18px}
  .site.site .bk :is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"])){font-size:19px}
  .site.site .cmp3 :is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"])){font-size:21px}
  .site.site .gc :is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"])){font-size:17.5px!important}
  /* guides: an easy reading measure */
  .site.site .art .body h2,.site.site .body h2{font-size:26px!important;line-height:1.16!important;margin:32px 0 10px}
  .site.site .art .body p{font-size:17.5px!important;line-height:1.62!important}
  .site.site .art .body li{font-size:17px!important}
  /* buttons in the page (the header keeps its own) */
  .site.site main .btn:not(.btn-sm){height:46px;padding:0 22px;font-size:15.5px}
  .site.site main .btn-sm{height:36px;padding:0 16px;font-size:13.5px}
}

/* the practice phone number on the Book page never breaks across lines */
.site.site .bktel{white-space:nowrap}

/* ---------- desktop and tablet spacing ---------- */
@media (min-width:761px){
  .site.site .sec{padding-top:64px!important;padding-bottom:64px!important}
  .site.site .sec-tight{padding-top:44px!important;padding-bottom:44px!important}
  .site.site .hero{padding-top:min(var(--pt,64px),48px)!important;padding-bottom:min(var(--pb,40px),40px)!important}
  .site.site .wrap{padding-bottom:min(var(--pb,0px),48px)!important}
  .site.site .sh{margin-bottom:24px}
  .site.site main :is([style*="margin-top:60px"],[style*="margin-top:56px"],[style*="margin-top:52px"],[style*="margin-top:48px"]){margin-top:32px!important}
  .site.site main :is([style*="margin-top:44px"],[style*="margin-top:40px"]){margin-top:28px!important}
  .site.site main [style*="margin-top:36px"]{margin-top:26px!important}
  /* tall photos: a section and its photo fit one screen */
  .site.site main .img:is([style*="height:640px"],[style*="height:620px"],[style*="height:600px"]){height:500px!important}
  .site.site main .img[style*="height:560px"]{height:460px!important}
  .site.site main .img[style*="height:520px"]{height:440px!important}
}
@media (min-width:761px) and (max-width:1180px){
  .site.site .sec{padding-top:52px!important;padding-bottom:52px!important}
  .site.site .sec-tight{padding-top:36px!important;padding-bottom:36px!important}
}

/* ---------- portrait tablets (761 to 960px): columns stack, so nothing is squeezed ---------- */
@media (min-width:761px) and (max-width:960px){
  .site.site .grid12{row-gap:22px}
  .site.site .grid12>*,.site.site .grid12>[style*="grid-column"]{grid-column:1/-1!important}
  .site.site .grid12>[style*="padding-left"]{padding-left:0!important}
  .site.site .grid12>[style*="padding-right"]{padding-right:0!important}
  .site.site .grid12>[style*="border-left"]{border-left:0!important}
  .site.site .hero .grid12>div[style*="text-align:right"]{text-align:left!important}
  .site.site .hero .grid12 .img,.site.site .hero .grid12 .pfimg{height:400px!important}
  .site.site .grid12>div>.h2:not(.sh),.site.site .grid12>[style*="span 4"] .h2,.site.site .grid12>[style*="span 5"] .h2,.site.site .grid12>[style*="span 6"] .h2{font-size:min(30px,calc((100vw - 80px)*.0385))!important}
  .site.site .acg,.site.site .two,.site.site .gdg,.site.site .cta-band{grid-template-columns:minmax(0,1fr)!important}
  .site.site .feat1{display:flex;flex-direction:column}
  .site.site .feat1 .im{height:260px!important;min-height:0!important}
}

/* =====================================================================
   PHONES (up to 760px)
   ===================================================================== */
@media (max-width:760px){
  /* type */
  .site.site .d1,.site.site .d2{font-size:min(30px,calc((100vw - 40px)*.0857))!important;line-height:1.12!important;letter-spacing:-.035em!important}
  .site.site .gh1{font-size:min(26px,calc((100vw - 40px)*.0743))!important;line-height:1.15!important;letter-spacing:-.03em!important}
  .site.site .h2,.site.site .cta-band .h2,.site.site .grid12 .h2,.site.site .sech .h2,.site.site .pph .h2{font-size:min(24px,calc((100vw - 40px)*.0686))!important;line-height:1.18!important;letter-spacing:-.028em!important}
  .site.site .h3{font-size:19px!important;line-height:1.2!important;letter-spacing:-.02em}
  .site.site .h4,.site.site .step :is(h4:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="4"])){font-size:17px;line-height:1.3}
  .site.site .lede{font-size:17px!important;line-height:1.45!important}
  .site.site .kick,.site.site .eyebrow{font-size:13.5px!important;margin-bottom:6px!important;letter-spacing:0}
  .site.site :is(p[style*="font-size:44px"],p[style*="font-size:40px"],main [style*="font-size:44px"]){font-size:min(24px,calc((100vw - 40px)*.0686))!important;line-height:1.2!important}
  .site.site .bg-dark p[style*="font-size:21px"],.site.site .stmt p[style*="font-size:21px"]{font-size:16.5px!important;line-height:1.5!important}
  .site.site .art .body h2,.site.site .body h2{font-size:20px!important;line-height:1.2!important;margin:26px 0 8px}
  .site.site .feat1 h2{font-size:21px!important}
  .site.site main [style*="font-size:120px"],.site.site main [style*="font-size:88px"]{font-size:48px!important}
  .site.site main [style*="font-size:72px"],.site.site main [style*="font-size:56px"]{font-size:40px!important}

  /* rhythm: 36px between sections, 16-18px from a heading to what it introduces */
  .site.site .sec{padding:36px 20px!important}
  .site.site .sec-tight{padding:26px 20px!important}
  .site.site .hero{padding-top:24px!important;padding-bottom:28px!important}
  .site.site .sh{margin-bottom:14px}
  .site.site main :is([style*="margin-top:60px"],[style*="margin-top:56px"],[style*="margin-top:52px"],[style*="margin-top:48px"],[style*="margin-top:44px"],[style*="margin-top:40px"],[style*="margin-top:36px"],[style*="margin-top:32px"]){margin-top:18px!important}
  .site.site main :is([style*="margin-top:30px"],[style*="margin-top:28px"]){margin-top:16px!important}
  .site.site main .img[style*="height:"]:not(.keep){height:220px!important}

  /* reading: text runs down the left edge; the homepage keeps its centred opening */
  .site.site :is(.sec.center,.sec-tight.center,.hero.center:not(.home)),.site.site .stmt{text-align:left!important}
  .site.site :is(.sec.center,.sec-tight.center,.hero.center:not(.home),.stmt) :is(.mx,.lede,p){margin-left:0!important;margin-right:0!important}
  .site.site :is(.sec.center,.sec-tight.center,.hero.center:not(.home)) :is(.ctas,.chips,.chips.l){justify-content:flex-start!important}
  .site.site :is(.sec.center,.sec-tight.center,.hero.center:not(.home),.stmt) [style*="justify-content:center"]{justify-content:flex-start!important}
  .site.site :is(.sec.center,.sec-tight.center,.hero.center:not(.home)) .cred{margin-left:0!important;margin-right:0!important}
  .site.site :is(.sec.center,.sec-tight.center) :is(.more,.link){align-self:flex-start}
  .site.site .hero.center.home,.site.site .is-home .hero.center{text-align:center!important}
  .site.site :is(.hero.center.home,.is-home .hero.center) :is(.ctas,.chips){justify-content:center!important}
  .site.site :is(.hero.center.home,.is-home .hero.center) :is(.mx,.lede,p,.cred){margin-left:auto!important;margin-right:auto!important}

  /* homepage treatments: two-across photo tiles, not full-width bands */
  .site.site .rows{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;padding:10px 20px 0}
  .site.site .rowt{height:auto!important;min-height:0!important;aspect-ratio:1/1.12;border-radius:18px;overflow:hidden;padding:14px!important;align-items:flex-end;justify-content:flex-start;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .site.site .rowt+.rowt{border-top:0}
  .site.site .rowt .ov{background:linear-gradient(180deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.72) 100%)!important}
  .site.site .rowt .tx{width:100%}
  .site.site .rowt .h2{font-size:min(19px,calc((100vw - 110px)*.066))!important;line-height:1.15!important;letter-spacing:-.02em!important}
  .site.site .rowt .sub,.site.site .rowt .cta{display:none!important}
  .site.site .rowt .fine{font-size:12.5px!important;line-height:1.3;margin-top:5px;padding:0!important;color:rgba(255,255,255,.92)!important;display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
  .site.site .rowt .fine sup{display:none}
  .site.site .rowt:active{transform:scale(.985)}
  .site.site .rows>.rowt:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:2.2/1}

  /* three steps: one grouped card, three rows, the problems as one line of buttons */
  .site.site .step3{display:block!important;background:var(--white);border-radius:22px;padding:2px 14px!important;margin:20px 0 0!important;gap:0!important;overflow:visible}
  .site.site .bg-porcelain .step3{background:var(--white)}
  .site.site .step3>.tilec{display:grid!important;grid-template-columns:56px minmax(0,1fr);column-gap:14px;align-items:center;background:transparent!important;border-radius:0!important;padding:14px 0!important;border-top:1px solid var(--hairline);min-height:0!important}
  .site.site .step3>.tilec:first-child{border-top:0}
  .site.site .step3>.tilec>.img{grid-column:1;grid-row:1/4;width:56px!important;height:56px!important;border-radius:14px;align-self:start;margin:0!important}
  .site.site .step3 .in{display:contents}
  .site.site .step3 .in>.label{grid-column:2;grid-row:1;font-size:11.5px!important;line-height:1.2;margin:0!important}
  .site.site .step3 .in>:is(.h3,:is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"]))){grid-column:2;grid-row:2;font-size:18px!important;line-height:1.15!important;margin:1px 0 0!important}
  .site.site .step3 .in>p{grid-column:2;grid-row:3;font-size:13.5px!important;line-height:1.3!important;margin:2px 0 0!important}
  .site.site .step3 .cl{grid-column:1/-1;grid-row:4;display:flex!important;flex-wrap:nowrap;gap:6px;margin:12px 0 0!important}
  .site.site .step3 .cl div{flex:1 1 auto;display:flex!important;align-items:center;justify-content:center;gap:5px;height:36px;padding:0 10px!important;border:1px solid var(--hairline)!important;border-radius:980px;background:var(--trim);font-size:13.5px!important;font-weight:560;letter-spacing:-.01em;color:var(--accent);white-space:nowrap;border-top:1px solid var(--hairline)!important}
  .site.site .step3 .cl div:active{transform:scale(.96)}

  /* highlight tiles: no empty space, the figure follows its line */
  .site.site .hl .tilec{min-height:0!important;justify-content:flex-start!important;gap:10px!important;padding:16px!important}
  .site.site .hl .tilec .stat{margin-top:4px!important;font-size:30px!important;line-height:1!important}
  .site.site .hl .tilec p{font-size:14px!important}

  /* bridge and material cards: compact, swatch beside the name, price on the right */
  .site.site .cmp3{gap:10px!important}
  .site.site .cmp3>div{padding:16px 18px 6px!important;border-radius:20px!important;display:grid!important;grid-template-columns:40px 1fr auto;column-gap:12px;align-items:center;text-align:left}
  .site.site .cmp3>div>.sw{width:40px!important;height:40px!important;margin:0!important;grid-column:1;grid-row:1}
  .site.site .cmp3>div>:is(.h3,:is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"]))){grid-column:2;grid-row:1;margin:0!important;font-size:19px!important}
  .site.site .cmp3>div>.pz{grid-column:3;grid-row:1;margin:0!important;font-size:21px!important;text-align:right}
  .site.site .cmp3>div>.pz small{font-size:11.5px}
  .site.site .cmp3>div>.row{grid-column:1/-1;padding:10px 0!important}
  .site.site .cmp3>div>.row:first-of-type{margin-top:12px}
  .site.site .cmp3>div>.row b{font-size:12px}
  .site.site .cmp3>div>.row span{font-size:14.5px}
  .site.site .cmp3 .pill{position:static!important;transform:none!important;grid-column:1/-1;justify-self:start;margin-bottom:10px}

  /* before and after: shorter frames */
  .site.site .bas.case{aspect-ratio:16/9!important}

  /* small print stays legible */
  .site.site :is(.rowt .fine,.tx-m.small,.gc .meta,.tag){font-size:max(12px,1em)}
}
@media (max-width:360px){
  .site.site .step3{padding:2px 12px!important}
  .site.site .step3 .cl{gap:5px}
  .site.site .step3 .cl div{padding:0 7px!important;font-size:12.5px!important;gap:3px}
}

/* FAQs page: each answer links to the page where the question is covered in full */
.faq-more{display:block;margin-top:8px}
.faq-more a{font-size:14.5px;font-weight:560;color:var(--accent);text-decoration:none}
.faq-more a:hover{text-decoration:underline}

/* cookie bar: a short line and two buttons, so it stays compact */
body .ckbar{max-width:440px}

/* fee list category titles: scale on narrow phones so long names stay on one line */
@media (max-width:760px){.site.site .fb>h2,.site.site .fb>:is(h3:where(:not([data-h])),:is(h1,h2,h3,h4,h5,h6):where([data-h="3"])){font-size:min(20px,calc((100vw - 40px)*.0594))!important;white-space:nowrap}}