/* Home page, one chapter per screen (2026-09-27, owner request).
   On a PC-sized window every chapter of the home page is exactly one screen tall
   (window height minus the 69px sticky header) and the page snaps to the top of a
   chapter when scrolling stops. Tablets (769-1180px wide) use the same layout with the
   adjustments in the TABLETS part; phones have their own part. Short windows keep the
   normal long-scroll page.
   Each chapter is re-laid-out so its resting state fits the screen; anything a
   visitor opens inside a chapter (accordion, case details) scrolls inside the chapter. */
/* controls that home-snap.js adds are for the one-screen layout only */
#stories .hs-snap-nav{display:none}
@media (min-width:769px) and (min-height:720px){
html:has(#view-home:not([hidden])){scroll-snap-type:y mandatory}
.hp-page #view-home{--snap-h:calc(100svh - 69px);--snap-pad:clamp(20px,4.4vh,56px);--snap-gap:clamp(12px,2.6vh,36px)}
.hp-page #view-home>.hp-hero-cover{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:69px} /* the header only; the strip above it is gone (2026-10-04) */

/* English copy runs longer: pictures give up a little more height */
html[lang^="en"] .hp-page #view-home #essentials{--snap-en:56px}
html[lang^="en"] .hp-page #view-home #stories,html[lang^="en"] .hp-page #view-home #access{--snap-en:16px}

html[lang^="en"] .hp-page #view-home #reasons .dlead{font-size:13px;line-height:1.62}
html[lang^="en"] .hp-page #view-home #reasons .dname{font-size:clamp(20px,3vh,25px);line-height:1.3}
html[lang^="en"] .hp-page #view-home #reasons .dconsult p{font-size:12px;line-height:1.65}

/* ---------- the chapter frame ---------- */
.hp-page #view-home>#concerns,
.hp-page #view-home>#cases,
.hp-page #view-home>#stories,
.hp-page #view-home>#reasons,
.hp-page #view-home>#price,
.hp-page #view-home>#journal-invite,
.hp-page #view-home>#essentials,
.hp-page #view-home>#faq,
.hp-page #view-home>#access{
  height:var(--snap-h);min-height:0;box-sizing:border-box;margin:0;
  padding-top:var(--snap-pad);padding-bottom:var(--snap-pad);
  display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;
  overflow:hidden auto;scrollbar-width:thin;
  scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:69px}
/* ---------- 02 OUR APPROACH, then WHY HILLS GRACE: two chapters ---------- */
.hp-page #view-home>#concept{height:auto;padding:0;display:block;overflow:visible;scroll-snap-align:none}
.hp-page #view-home #concept>.hp-wrap{box-sizing:border-box;height:var(--snap-h);margin-top:0;margin-bottom:0;padding-top:var(--snap-pad);padding-bottom:var(--snap-pad);
  align-content:safe center;overflow:hidden auto;scrollbar-width:thin;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:69px}
.hp-page #view-home #concept>.hp-care-before-concerns{display:grid;grid-template-columns:minmax(0,1fr)}
.hp-page #view-home #concept .hp-reasons3-head{padding-bottom:clamp(10px,1.8vh,24px)}
.hp-page #view-home #concept .hp-reasons3-head h2{font-size:clamp(24px,3.6vh,36px);line-height:1.4}
.hp-page #view-home #concept .hp-reasons3-intro{margin-top:clamp(4px,1vh,12px);font-size:13px;line-height:1.8}
.hp-page #view-home #concept .hp-reasons3-kicker{margin-bottom:clamp(6px,1.2vh,14px)}
.hp-page #view-home #concept .hp-care-before-concerns li p{line-height:1.75}
/* the photographs take the height the words leave; on a low window they become a band */
.hp-page #view-home #concept .hp-care-photo{aspect-ratio:auto;height:clamp(0px,calc(var(--snap-h) - 2*var(--snap-pad) - 640px),210px)}
.hp-page #view-home #concept .hp-reasons3-head{margin-bottom:clamp(12px,2.2vh,32px)}
.hp-page #view-home #concept .hp-care-number{margin-top:clamp(10px,1.6vh,16px)}
.hp-page #view-home #concept .hp-care-facts{margin-top:clamp(8px,1.6vh,16px);padding-top:clamp(8px,1.4vh,14px)}
.hp-page #view-home #concept .hp-care-before-concerns li p.hp-care-credit{margin-top:clamp(4px,1vh,12px)}
.hp-page #view-home #concept .hp-care-before-concerns li h3{margin-bottom:clamp(6px,1.2vh,12px)}
.hp-page #view-home #concept .hp-care-before-concerns li p{line-height:clamp(1.6,calc(1.6 + (100vh - 720px)/1200px),1.75)}
html[lang^="en"] .hp-page #view-home #concept .hp-care-before-concerns li p{font-size:11px;line-height:1.55}
html[lang^="en"] .hp-page #view-home #concept .hp-care-before-concerns li p.hp-care-credit{margin-top:6px;font-size:10px}
html[lang^="en"] .hp-page #view-home #concept .hp-care-facts{margin-top:10px;padding-top:8px}
html[lang^="en"] .hp-page #view-home #concept .hp-reasons3-head h3{font-size:clamp(19px,2vw,26px)}
html[lang^="en"] .hp-page #view-home #concept .hp-care-before-concerns h3{margin-bottom:8px}
html[lang^="en"] .hp-page #view-home #concept .hp-care-photo{height:clamp(0px,calc(var(--snap-h) - 2*var(--snap-pad) - 720px),200px)}
html[lang^="en"] .hp-page #view-home #concept .hp-care-facts{flex-wrap:wrap}

/* ---------- 03 CONCERNS: photograph left, the list fills the height ---------- */
.hp-page #view-home>#concerns{align-content:stretch;grid-template-rows:minmax(0,1fr)}
.hp-page #view-home #concerns .hp-entry-wrap{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.hp-page #view-home #concerns .hc-heading{margin-bottom:clamp(10px,2.4vh,34px)}
.hp-page #view-home #concerns .hc-spread{min-height:0;height:100%;grid-template-columns:auto minmax(0,1fr);align-items:stretch}
.hp-page #view-home #concerns .hc-stage{margin-top:0;height:100%;width:auto;aspect-ratio:3/4;min-height:0}
.hp-page #view-home #concerns .hc-slide{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.hp-page #view-home #concerns .hc-stage-number{transform-origin:left top}
/* the same frame for every concern: the frame takes the height that is left, the photograph is cropped to it */
.hp-page #view-home #concerns .hc-stage-photo{grid-row:2;position:relative;align-self:stretch;height:auto;min-height:0;aspect-ratio:auto}
.hp-page #view-home #concerns .hc-stage-caption{grid-row:3}
.hp-page #view-home #concerns .hc-stage-image{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
.hp-page #view-home #concerns .hc-index{height:100%;display:grid;grid-auto-rows:minmax(0,1fr);margin:0}
.hp-page #view-home #concerns .hc-index>li{min-height:0;display:grid}
.hp-page #view-home #concerns .hc-link{padding-top:0;padding-bottom:0;min-height:0;height:100%;align-items:center}

/* ---------- 04 COLLECTION: two chapters, devices then injectables (no tab: nothing to overlook) ---------- */
.hp-page #view-home>.hp-treatment-section{height:auto;padding:0;display:block;overflow:visible;scroll-snap-align:none}
.hp-page #view-home .hp-treatment-section #grace-collection{width:100%;max-width:none;padding:0;margin:0}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-gallery-group{container-type:inline-size;box-sizing:border-box;height:var(--snap-h);margin:0;padding:var(--snap-pad) 0;border:0;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:auto;align-content:safe center;column-gap:44px;
  scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:69px}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-gallery-group+.gc-gallery-group{border-top:1px solid #ece6dc}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-gallery-group>*{grid-column:2;min-width:0}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-exhibit{grid-column:1;grid-row:1/span 8;align-self:center;height:min(calc(var(--snap-h) - 2*var(--snap-pad)),calc((100cqw - 344px)*.75));width:auto;aspect-ratio:4/3;max-width:none}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-photo{width:100%;height:100%;object-fit:cover}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-eyebrow{margin:0;white-space:nowrap;letter-spacing:.12em}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-heading{margin:clamp(6px,1.4vh,14px) 0 clamp(10px,2.2vh,24px)}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-heading h2{font-size:24px;line-height:1.5;letter-spacing:.04em;white-space:nowrap}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-group-heading{margin:0;padding:0 0 clamp(6px,1.2vh,12px);border-bottom:1px solid #2a2622;font-size:clamp(17px,2.5vh,21px);line-height:1.5}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-gallery-group:not(:first-of-type) .gc-group-heading{font-size:clamp(22px,3.2vh,28px);letter-spacing:.06em}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-card-dock{height:0}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-index{padding:0;grid-template-columns:minmax(0,1fr);column-gap:0}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-index-link,
.hp-page #view-home .hp-treatment-section #grace-collection .gc-index-unavailable{min-height:0;height:clamp(22px,3.7vh,36px);padding:0;align-items:center}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-gallery-note{margin:clamp(8px,1.6vh,18px) 0 0;font-size:10.5px;line-height:1.7}

/* ---------- 05 CASES ---------- */
.hp-page #view-home>#cases{align-content:stretch;grid-template-rows:minmax(0,1fr)}
.hp-page #view-home #cases .cm-wrap{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;height:100%}
.hp-page #view-home #cases .cm-console-body{min-height:0;height:100%;align-items:stretch}
.hp-page #view-home #cases .cm-side{position:static;align-self:center}
.hp-page #view-home #cases .cm-intro{margin-bottom:clamp(8px,1.8vh,22px)}
.hp-page #view-home #cases .cm-remote{padding-top:clamp(8px,1.6vh,18px)}
/* 2026-10-07: in short windows (iPad landscape 1024×768 / 1133×744, 1366×768) the ten rows of keys ran 15–60px past the chapter
   into the note; the rows now take their height from the window (40px from 910px tall). */
.hp-page #view-home #cases .cm-key{min-height:clamp(32px,4.4vh,40px);padding-top:3px;padding-bottom:3px}
.hp-page #view-home #cases .cm-monitor{min-height:0;height:100%;box-sizing:border-box;display:grid}
.hp-page #view-home #cases .cm-screen{min-height:0;height:100%;box-sizing:border-box;overflow:hidden auto;scrollbar-width:thin;padding-top:clamp(12px,2.4vh,26px);padding-bottom:clamp(12px,2.2vh,24px)}
.hp-page #view-home #cases .cm-case-heading{margin-bottom:clamp(8px,1.4vh,16px)}
.hp-page #view-home #cases .cm-comparison{grid-template-columns:repeat(2,auto);justify-content:center}
.hp-page #view-home #cases .cm-image img{height:clamp(170px,calc(var(--snap-h) - 2*var(--snap-pad) - 354px),420px);width:auto;max-width:100%;object-fit:contain}
.hp-page #view-home #cases .cm-case-story{margin-top:clamp(8px,1.4vh,16px)}
.hp-page #view-home #cases .cdet{margin-top:clamp(6px,1.2vh,14px)}
.hp-page #view-home #cases .cm-page-link{margin-top:clamp(4px,1.2vh,18px)}
.hp-page #view-home #cases .cm-note{margin-top:clamp(6px,1.4vh,22px);padding-top:clamp(6px,1.2vh,14px)}

/* ---------- 06 STORIES: one row that slides sideways ---------- */
.hp-page #view-home #stories .shead{margin-bottom:clamp(6px,1.2vh,16px)}
.hp-page #view-home #stories .hap{align-items:center}
.hp-page #view-home #stories .hs-story-browser{margin-top:0;position:relative;min-width:0}
.hp-page #view-home #stories #story-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*22px)/4);gap:22px;overflow:auto hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.hp-page #view-home #stories #story-grid::-webkit-scrollbar{display:none}
.hp-page #view-home #stories #story-grid>.story{scroll-snap-align:start;min-width:0}
.hp-page #view-home #stories #story-grid>.story[hidden]{display:flex!important}
.hp-page #view-home #stories .story-ph{height:clamp(120px,calc(var(--snap-h) - 2*var(--snap-pad) - 446px - var(--snap-en,0px)),calc(280px - var(--snap-en,0px)));aspect-ratio:auto}
.hp-page #view-home #stories .story-ph img{width:100%;height:100%;object-fit:cover}
.hp-page #view-home #stories .hs-story-expand{display:none}
.hp-page #view-home #stories .hs-snap-nav{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:clamp(10px,2vh,22px)}
.hp-page #view-home #stories .hs-snap-count{margin-right:auto;color:#8a8175;font:400 11px/1.6 Georgia,serif;letter-spacing:.14em}
.hp-page #view-home #stories .hs-snap-btn{appearance:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d9d0c0;border-radius:50%;background:transparent;color:#514a43;font:400 17px/1 sans-serif;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.hp-page #view-home #stories .hs-snap-btn:hover{background:#fff;border-color:#a08247}
.hp-page #view-home #stories .hs-snap-btn[disabled]{opacity:.32;cursor:default}
.hp-page #view-home #stories .rnote{margin-top:clamp(12px,3vh,44px);padding-top:clamp(10px,2vh,24px)}
.hp-page #view-home #stories .rnote-list{margin-top:clamp(4px,1vh,14px)}

/* ---------- 07 REASONS & DOCTORS: portrait beside the words ---------- */
.hp-page #view-home #reasons .hp-entry-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:end}
.hp-page #view-home #reasons .hp-entry-heading{grid-column:1;grid-row:1;margin-bottom:0}
.hp-page #view-home #reasons .hp-entry-heading h2{font-size:clamp(24px,4vh,38px);line-height:1.45}
/* 2026-09-28: the CONCERNS heading is set in the same size as the doctors heading; the photograph is a little smaller and centred on the list */
.hp-page #view-home #concerns .hc-heading h2{font-size:clamp(24px,4vh,38px);line-height:1.45;letter-spacing:.045em}
@media (min-width:1181px){.hp-page #view-home #concerns .hc-stage{height:84%;align-self:center}.hp-page #view-home #concerns .hc-heading{margin-bottom:clamp(14px,3vh,40px)}}
.hp-page #view-home #reasons .hp-team-intro{margin-top:clamp(4px,1vh,18px)}
.hp-page #view-home #reasons .hp-team-actions{grid-column:2;grid-row:1;margin:0}
.hp-page #view-home #reasons .hp-team-grid{grid-column:1/-1;grid-row:2;margin-top:clamp(10px,2.2vh,32px)}
.hp-page #view-home #reasons .hp-research-reader{grid-column:1/-1;grid-row:3}
.hp-page #view-home #reasons .dconsult{grid-column:1/-1;grid-row:4}
.hp-page #view-home #reasons .hp-team-doctor{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:26px;align-items:start;align-content:start}
.hp-page #view-home #reasons .hp-team-profile{display:contents}
.hp-page #view-home #reasons .dphoto{grid-column:1;grid-row:1/span 3;align-self:start;height:clamp(180px,34vh,290px);min-height:0;aspect-ratio:auto;overflow:hidden} /* both portraits the same size */
.hp-page #view-home #reasons .hp-team-doctor .dphoto img{display:block;width:100%;height:100%!important;min-height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:50% 18%}
.hp-page #view-home #reasons .hp-team-identity{grid-column:2;grid-row:1;padding-top:0}
.hp-page #view-home #reasons .dlead{grid-column:2;grid-row:2;margin-top:clamp(6px,1.2vh,14px)}
.hp-page #view-home #reasons .hp-team-doctor>.lnk{grid-column:2;grid-row:3;align-self:end;margin-top:2px}
.hp-page #view-home #reasons .hp-doctor-details{grid-column:1/-1;grid-row:4;margin-top:clamp(8px,1.6vh,18px);margin-bottom:0}
.hp-page #view-home #reasons .dconsult{margin-top:clamp(10px,2.2vh,28px);padding-top:clamp(12px,1.9vh,22px);padding-bottom:clamp(12px,1.9vh,22px);grid-template-columns:auto minmax(0,1fr) auto;column-gap:32px;row-gap:2px;align-items:center}
.hp-page #view-home #reasons .dconsult h3{grid-column:1;grid-row:1/span 2;margin:0;white-space:nowrap}
.hp-page #view-home #reasons .dconsult p{grid-column:2;margin:0}
.hp-page #view-home #reasons .dconsult .btn{grid-column:3;grid-row:1/span 2}

/* ---------- 08 PRICE ---------- */
.hp-page #view-home #price .shead{margin-bottom:clamp(14px,3vh,36px)}

/* ---------- 09 JOURNAL: thumbnail rows ---------- */
.hp-page #view-home #journal-invite .hp-journal-heading{margin-bottom:clamp(12px,3vh,40px)}
.hp-page #view-home #journal-invite .hp-journal-collection{align-content:start}
.hp-page #view-home #journal-invite .hp-journal-collection-heading{margin-bottom:clamp(4px,1vh,12px)}
.hp-page #view-home #journal-invite .hp-journal-grid{grid-template-columns:minmax(0,1fr);gap:0}
.hp-page #view-home #journal-invite .hp-journal-card{border-bottom:1px solid #e6e0d6}
.hp-page #view-home #journal-invite .hp-journal-card-link{flex-direction:row;align-items:center;gap:20px;padding:clamp(6px,1.25vh,15px) 0}
.hp-page #view-home #journal-invite .hp-journal-image{flex:0 0 auto;width:clamp(104px,15.5vh,148px);height:clamp(70px,10.4vh,99px);aspect-ratio:auto}
.hp-page #view-home #journal-invite .hp-journal-image img{width:100%;height:100%;object-fit:cover}
.hp-page #view-home #journal-invite .hp-journal-card-copy{flex:1;min-width:0;padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
.hp-page #view-home #journal-invite .hp-journal-category{grid-column:1;margin-bottom:4px}
.hp-page #view-home #journal-invite .hp-journal-card-copy h3{grid-column:1;margin:0;font-size:14.5px;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hp-page #view-home #journal-invite .hp-journal-card-action{grid-column:2;grid-row:1/span 2;margin:0;padding:0;border:0}
.hp-page #view-home #journal-invite .hp-journal-card-action>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- 10 ESSENTIALS ---------- */
.hp-page #view-home #essentials .he-header{margin-bottom:clamp(12px,2.6vh,40px)}
.hp-page #view-home #essentials .he-feature-image{height:clamp(150px,calc(var(--snap-h) - 2*var(--snap-pad) - 470px - var(--snap-en,0px)),470px);aspect-ratio:auto}
.hp-page #view-home #essentials .he-object-image{height:clamp(110px,calc(var(--snap-h) - 2*var(--snap-pad) - 562px - var(--snap-en,0px)),380px);aspect-ratio:auto}
.hp-page #view-home #essentials .he-feature-image img,.hp-page #view-home #essentials .he-object-image img{width:100%;height:100%;object-fit:cover}
.hp-page #view-home #essentials .he-feature-caption{padding-top:clamp(10px,1.8vh,22px)}
.hp-page #view-home #essentials .he-actions{margin-top:clamp(6px,1.2vh,18px)}
.hp-page #view-home #essentials .he-feature-description{margin-top:clamp(4px,1vh,15px)}
.hp-page #view-home #essentials .he-footer{margin-top:clamp(10px,2.2vh,38px);padding-top:clamp(10px,1.8vh,28px)}

@media (max-height:860px){
.hp-page #view-home #essentials .he-feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:26px;align-items:start}
.hp-page #view-home #essentials .he-feature-link{display:contents}
.hp-page #view-home #essentials .he-feature-image{grid-column:1;grid-row:1/-1;height:clamp(200px,calc(var(--snap-h) - 2*var(--snap-pad) - 270px - var(--snap-en,0px)),420px)}
.hp-page #view-home #essentials .he-feature-caption{grid-column:2;grid-row:1;padding-top:0}
.hp-page #view-home #essentials .he-feature-actions{grid-column:2;grid-row:2;flex-wrap:wrap}
.hp-page #view-home #essentials .he-feature-description{grid-column:2;grid-row:3}
.hp-page #view-home #essentials .he-object{padding-top:clamp(8px,1.4vh,14px);padding-bottom:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:22px;align-items:start}
.hp-page #view-home #essentials .he-object-main{display:contents}
.hp-page #view-home #essentials .he-object-image{grid-column:1;grid-row:1/-1;height:clamp(150px,calc(var(--snap-h) - 2*var(--snap-pad) - 346px - var(--snap-en,0px)),360px)}
.hp-page #view-home #essentials .he-object-copy{grid-column:2;grid-row:1;padding-top:0}
.hp-page #view-home #essentials .he-object-actions{grid-column:2;grid-row:2;flex-wrap:wrap}
}
/* ---------- 11 FAQ: heading left, questions right ---------- */
.hp-page #view-home #faq>.wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:60px;align-items:start}
.hp-page #view-home #faq .shead{margin-bottom:0;grid-column:1;grid-row:1}
.hp-page #view-home #faq .faq{grid-column:2;grid-row:1/span 2;max-width:none;margin:0}
.hp-page #view-home #faq>.wrap>p{grid-column:1;grid-row:2;margin-top:clamp(12px,2.4vh,26px);text-align:left}
.hp-page #view-home #faq .faq summary{padding-top:clamp(11px,1.9vh,18px);padding-bottom:clamp(11px,1.9vh,18px)}

/* ---------- 12 ACCESS: see the PC-only and tablet-only parts below ---------- */
/* ---------- 13 CONSULTATION + footer share the last screen ---------- */
.hp-page #view-home>#consultation{height:max(150px,calc(var(--snap-h) - var(--snap-ftr,470px)));min-height:0;box-sizing:border-box;padding-top:0;padding-bottom:0;display:grid;align-content:center;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:69px}
.hp-page #view-home>#consultation .bg,.hp-page #view-home>#consultation .bg img{height:100%}
.hp-page #view-home>#consultation h2{font-size:clamp(24px,4vh,36px);line-height:1.5}
.hp-page #view-home>#consultation h2 br{display:none}
.hp-page #view-home>#consultation p{margin-top:clamp(4px,1vh,12px)}
html:has(#view-home:not([hidden])) .hp-page .ftr{scroll-snap-align:end;padding-top:clamp(14px,2.6vh,40px);padding-bottom:clamp(10px,2vh,30px)}
html:has(#view-home:not([hidden])) .hp-page .ftr .cols li{margin-bottom:clamp(2px,.6vh,7px)}
html:has(#view-home:not([hidden])) .hp-page .ftr .cols h4{margin-bottom:clamp(6px,1vh,13px)}
html:has(#view-home:not([hidden])) .hp-page .ftr .ftrinfo{margin-top:clamp(8px,1.6vh,26px)}
html:has(#view-home:not([hidden])) .hp-page .ftr .corp{line-height:1.75}
html:has(#view-home:not([hidden])) .hp-page .ftr .ftrinfo dl{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}
html:has(#view-home:not([hidden])) .hp-page .ftr .ftrinfo dt,html:has(#view-home:not([hidden])) .hp-page .ftr .ftrinfo dd{padding-top:clamp(4px,.8vh,9px);padding-bottom:clamp(4px,.8vh,9px)}
html:has(#view-home:not([hidden])) .hp-page .ftr .legal{margin-top:clamp(8px,1.8vh,24px);padding-top:clamp(8px,1.4vh,18px)}
}
@media (min-width:769px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
html:has(#view-home:not([hidden])){scroll-behavior:smooth}
}


/* =====================================================================
   TABLETS (2026-09-27, owner request): iPad portrait and landscape.
   The PC layout above applies; this part only corrects what differs:
   the booking bar at the bottom, the hero, and the chapters that run long.
   ===================================================================== */
@media (min-width:769px) and (max-width:1180px) and (min-height:720px){
/* access: place, hours, booking notes in three columns */
.hp-page #view-home #access .shead{margin-bottom:clamp(12px,2.6vh,36px)}
.hp-page #view-home #access .access{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.86fr);column-gap:44px;row-gap:0;align-items:start;grid-template-rows:auto auto auto auto minmax(0,1fr)}
.hp-page #view-home #access .access>div:first-child{grid-column:1;grid-row:1/-1}
.hp-page #view-home #access .access>div:nth-child(2){display:contents}
.hp-page #view-home #access .access>div:nth-child(2)>*{grid-column:2}
.hp-page #view-home #access .access>div:nth-child(2)>.bknote{grid-column:3;grid-row:1/-1;margin-top:0;padding-top:0;border-top:0}
.hp-page #view-home #access .map,.hp-page #view-home #access .map img{height:clamp(150px,calc(var(--snap-h) - 2*var(--snap-pad) - 372px - var(--snap-en,0px)),calc(346px - var(--snap-en,0px)));aspect-ratio:auto}
.hp-page #view-home #access .map img{width:100%;object-fit:cover}
.hp-page #view-home #access .acc-place{margin-top:clamp(8px,1.6vh,20px);padding-bottom:clamp(8px,1.6vh,20px)}
.hp-page #view-home #access .routefacts>div{padding-top:clamp(4px,.8vh,8px);padding-bottom:clamp(4px,.8vh,8px)}
.hp-page #view-home #access .hours{margin-top:clamp(8px,1.4vh,16px)}
.hp-page #view-home #access .note{margin-top:clamp(8px,1.8vh,24px)}
.hp-page #view-home #access .access>div>p:has(.btn){margin-top:clamp(8px,1.6vh,20px)}

.hp-page #view-home,html:has(#view-home:not([hidden])) .hp-page .ftr{--snap-h:calc(100svh - var(--snap-hdr,69px) - var(--snap-bar,61px));--snap-pad:clamp(14px,2.4vh,36px)}
.hp-page #view-home #concerns .hc-heading{margin-bottom:clamp(8px,1.6vh,24px)}
.hp-page #view-home #concept .hp-care-photo{height:clamp(0px,calc(var(--snap-h) - 2*var(--snap-pad) - 790px),148px)}
.hp-page #view-home #concept .hp-care-before-concerns li p{font-size:12px;line-height:1.62}
.hp-page #view-home #concept .hp-care-before-concerns li h3{font-size:16px}
.hp-page #view-home #concept .hp-reasons3-head{margin-bottom:12px}
.hp-page #view-home #concept .hp-reasons3-intro{font-size:12.5px;line-height:1.7}
.hp-page #view-home #concept .hp-care-number{margin-top:8px;font-size:24px}
.hp-page #view-home #concept .hp-care-before-concerns .hp-care-who{margin-top:6px}
html[lang^="en"] .hp-page #view-home #concept .hp-care-photo{display:none}
.hp-page #view-home #concerns .hc-detail{font-size:10px;line-height:1.35}
.hp-page #view-home #concerns .hc-name{line-height:1.35}
.hp-page #view-home #reasons .hp-entry-heading h2{font-size:clamp(22px,3.6vh,34px)}
.hp-page #view-home #concerns .hc-heading h2{font-size:clamp(22px,3.6vh,34px)}
.hp-page #view-home #reasons .hp-doctor-details{margin-top:6px}
.hp-page #view-home #stories .story-ph{height:clamp(100px,calc(var(--snap-h) - 2*var(--snap-pad) - 470px),280px)}
.hp-page #view-home #reasons .dlead{font-size:13px;line-height:1.7}
.hp-page #view-home #reasons .hp-team-grid{margin-top:clamp(8px,1.6vh,24px)}
.hp-page #view-home #reasons .dconsult{margin-top:clamp(8px,1.6vh,24px)}
.hp-page #view-home #journal-invite .hp-journal-heading{margin-bottom:clamp(8px,1.6vh,28px)}
.hp-page #view-home #journal-invite .hp-journal-intro{margin-top:6px}
.hp-page #view-home>.hp-hero-cover{scroll-margin-top:var(--snap-hdr,69px);height:calc(var(--snap-h) - var(--snap-news,85px));min-height:0}
.hp-page #view-home>.hp-hero-cover .hp-hero-visual,.hp-page #view-home>.hp-hero-cover .hp-hero-visual img{height:100%}
/* the assistant button joins the booking bar, as on phones */
html:has(#view-home:not([hidden])) .hp-page .mcta{padding-right:22%}
html:has(#view-home:not([hidden])) .hp-page .aibtn{right:0;bottom:0;width:22%;height:var(--snap-bar,61px);box-sizing:border-box;justify-content:center;padding:0 4px;border:0;border-top:1px solid var(--gold);border-radius:0;box-shadow:none}

/* the closing chapter and the footer are one screen each */
.hp-page #view-home>#consultation{height:var(--snap-h)}
html:has(#view-home:not([hidden])) .hp-page .ftr{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--snap-hdr,69px);box-sizing:border-box;height:calc(var(--snap-h) + var(--snap-bar,61px));padding-top:var(--snap-pad);padding-bottom:calc(var(--snap-bar,61px) + var(--snap-pad));display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;overflow:hidden auto;scrollbar-width:none}
}
/* iPad held upright: the side-by-side chapters that need the width are stacked */
@media (min-width:769px) and (max-width:1023px) and (min-height:720px){
.hp-page #view-home #concerns .hc-spread{grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:28px}
.hp-page #view-home #concerns .hc-stage{width:100%;aspect-ratio:auto}
.hp-page #view-home #concerns .hc-stage-photo{align-self:start;aspect-ratio:4/5;width:100%}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-gallery-group{grid-template-columns:minmax(0,1fr);column-gap:0;padding-left:0;padding-right:0}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-gallery-group>*{grid-column:1}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-exhibit{grid-column:1;grid-row:auto;justify-self:center;margin:clamp(10px,2vh,22px) 0;height:clamp(200px,calc(var(--snap-h) - 2*var(--snap-pad) - 470px),calc((100cqw)*.75));width:auto;max-width:100%}
.hp-page #view-home .hp-treatment-section #grace-collection .gc-index{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.hp-page #view-home #stories .hap{display:block}
.hp-page #view-home #stories .hap-intro{margin:0 0 clamp(10px,2vh,22px);max-width:none}
.hp-page #view-home #stories .story-ph{height:clamp(110px,calc(var(--snap-h) - 2*var(--snap-pad) - 770px),300px)}
.hp-page #view-home #stories .rnote{margin-top:12px;padding-top:8px}
.hp-page #view-home #stories .rnote-item>summary{min-height:44px;padding-top:8px;padding-bottom:8px}
.hp-page #view-home #stories .hs-snap-nav{margin-top:8px}
.hp-page #view-home #access .access{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;grid-template-rows:auto auto auto auto auto minmax(0,1fr)}
.hp-page #view-home #access .access>div:nth-child(2)>.bknote{grid-column:2;grid-row:auto;margin-top:clamp(10px,2vh,22px);padding-top:clamp(10px,2vh,20px);border-top:1px solid #dcd6ca}
}

/* =====================================================================
   PC only: ACCESS (2026-09-27, owner: refine it; keep the photograph landscape).
   Left: the landscape photograph, the address and the routes.
   Right: the hours, the notes and the two booking buttons.
   ===================================================================== */
@media (min-width:1181px) and (min-height:720px){
.hp-page #view-home #access>.wrap{box-sizing:border-box}
.hp-page #view-home #access .shead{margin-bottom:clamp(14px,2.8vh,36px)}
.hp-page #view-home #access .access{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:clamp(40px,4.4vw,72px);row-gap:0;align-items:start}
.hp-page #view-home #access .access>div:first-child{grid-column:1;grid-row:1/span 5;min-width:0;container-type:inline-size}
.hp-page #view-home #access .map{position:static;width:auto;max-width:100%;height:min(66.67cqw,calc(var(--snap-h) - 2*var(--snap-pad) - 330px));aspect-ratio:3/2;margin:0;overflow:hidden}
.hp-page #view-home #access .map img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.hp-page #view-home #access .acc-place{margin:clamp(10px,1.8vh,18px) 0 0;padding:0 0 clamp(8px,1.4vh,14px);display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid #2a2622}
.hp-page #view-home #access .acc-place .ad{margin:0;font-size:13.5px;line-height:1.8;letter-spacing:.04em}
.hp-page #view-home #access .acc-place .mb{flex:none;display:inline-flex;align-items:center;gap:8px;width:auto;min-height:0;margin:0;padding:0 0 3px;border:0;border-bottom:1px solid #a08247;border-radius:0;background:none;color:#514a43;font-size:11.5px;font-weight:400;line-height:1.8;letter-spacing:.06em;white-space:nowrap}
.hp-page #view-home #access .routefacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0}
.hp-page #view-home #access .routefacts>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:clamp(4px,.9vh,9px) 0;border-bottom:1px solid #e0d9cc}
.hp-page #view-home #access .routefacts>div:last-child{grid-column:1/-1}
.hp-page #view-home #access .access>div:nth-child(2){display:contents}
.hp-page #view-home #access .access>div:nth-child(2)>*{grid-column:2;min-width:0}
.hp-page #view-home #access .access>div:nth-child(2)>h3{grid-row:1;margin:0 0 clamp(6px,1.2vh,12px);padding-bottom:clamp(8px,1.4vh,14px);border-bottom:1px solid #2a2622;font-family:var(--mincho);font-size:17px;font-weight:400;line-height:1.6;letter-spacing:.08em}
.hp-page #view-home #access .hours{grid-row:2;margin:0!important;width:100%;table-layout:fixed}
.hp-page #view-home #access .hours th:first-child,.hp-page #view-home #access .hours td:first-child{width:30%}
.hp-page #view-home #access .hours th{white-space:nowrap}
.hp-page #view-home #access .hours th,.hp-page #view-home #access .hours td{padding-top:clamp(7px,1.3vh,13px);padding-bottom:clamp(7px,1.3vh,13px)}
.hp-page #view-home #access .note{grid-row:3;margin:clamp(8px,1.4vh,14px) 0 0;font-size:12px;line-height:1.85}
.hp-page #view-home #access .access>div:nth-child(2)>.bknote{grid-row:4;margin:clamp(10px,2vh,22px) 0 0;padding:clamp(10px,1.8vh,20px) 0 0;border-top:1px solid #e0d9cc}
.hp-page #view-home #access .bknote ul{margin-top:8px;gap:2px}
.hp-page #view-home #access .bknote li{font-size:11.5px;line-height:1.75}
.hp-page #view-home #access .access>div:nth-child(2)>p:has(.btn){grid-row:5;margin:clamp(12px,2.4vh,28px) 0 0;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp-page #view-home #access .access>div:nth-child(2)>p:has(.btn) .btn{width:100%;box-sizing:border-box;justify-content:center;margin:0}
html[lang^="en"] .hp-page #view-home #access .hours th,html[lang^="en"] .hp-page #view-home #access .hours td{font-size:11px;padding-left:0;padding-right:0}
html[lang^="en"] .hp-page #view-home #access .hours th:first-child,html[lang^="en"] .hp-page #view-home #access .hours td:first-child{width:34%}
html[lang^="en"] .hp-page #view-home #access .note,html[lang^="en"] .hp-page #view-home #access .bknote li{font-size:11px;line-height:1.6}
html[lang^="en"] .hp-page #view-home #access .acc-place .ad{font-size:12.5px;line-height:1.65}
html[lang^="en"] .hp-page #view-home #access .routefacts>div{font-size:11.5px}
}
/* English: the collection heading may wrap (it pushed the page sideways on narrower windows) */
html[lang^="en"] .hp-page #view-home .hp-treatment-section #grace-collection .gc-heading h2{white-space:normal;font-size:21px}


/* the two 16:9 product photographs (owner, 2026-09-27) on every screen: the products stand in the
   middle of the frame, so a centred crop keeps them whole where the frame is narrower than 16:9 */
#essentials .he-feature-image img,#essentials .he-object-image img{object-fit:cover;object-position:50% 50%;mix-blend-mode:normal}
#essentials .he-object-image{background:#f4f4f4}
/* the merged research note exists only on phones (home-snap.js builds it) */
#stories .rnote-all>summary{list-style:none;cursor:pointer}
#stories .rnote-all>summary::-webkit-details-marker{display:none}

/* =====================================================================
   PHONES (2026-09-27): the owner tried one chapter per screen on a phone and
   went back to the normal long-scroll page (the type became too small and the
   layout cramped). Nothing snaps on a phone. Only these requests remain:
   the collection title is left out and the research note is one small note.
   ===================================================================== */
/* the collection title is left out on every screen (owner, 2026-09-27) */
.hp-page #view-home #grace-collection .gc-heading{display:none}
@media (max-width:640px){
.hp-page #view-home #stories .rnote{margin-top:28px;padding-top:0}
.hp-page #view-home #stories .rnote-all>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.hp-page #view-home #stories .rnote-all>summary .rnote-label{margin:0;font-size:10.5px;letter-spacing:.16em}
.hp-page #view-home #stories .rnote-all>summary::after{content:"+";color:#927c59;font:400 18px/1 sans-serif}
.hp-page #view-home #stories .rnote-all[open]>summary::after{content:"−"}
.hp-page #view-home #stories .rnote-all .rnote-list{margin:0}
.hp-page #view-home #stories .rnote-all .rnote-item{border-bottom:0}
.hp-page #view-home #stories .rnote-all .rnote-item>summary{pointer-events:none;min-height:0;padding:12px 0 2px;font-size:13.5px}
.hp-page #view-home #stories .rnote-all .rnote-toggle{display:none}
.hp-page #view-home #stories .rnote-all .rnote-item>p{padding-bottom:10px}
}
/* 2026-09-30 tablets: the concern photograph kept inside its column (it overflowed into the list by its left inset),
   more air between photograph and list, and the large number clear of the heading */
@media (min-width:769px) and (max-width:1180px) and (min-height:720px){
.hp-page #view-home #concerns .hc-heading{margin-bottom:clamp(34px,4.4vh,50px)}
.hp-page #view-home #concerns .hc-spread{column-gap:clamp(40px,4.6vw,56px)}
.hp-page #view-home #concerns .hc-stage-photo,.hp-page #view-home #concerns .hc-stage-caption{width:auto;min-width:0}
}