/* Dark hero for a quiet, high-end first view (2026-09-26): the clinic wordmark, one line of place and year,
   one reservation link. The corridor photograph sits behind a dark gradient. The opening overlay (below) dissolves
   into this. */
.hp-hero.hp-hero-cover{--hero-ink:#f3efe8;--hero-muted:#b6ad9f;--hero-dark:#0d0c0b;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);min-height:max(520px,calc(100vh - 162px));max-width:none;margin:0;overflow:hidden;background:var(--hero-dark);color:var(--hero-ink)}
.hp-hero.hp-hero-cover .hp-hero-visual{position:absolute;inset:0;z-index:0;height:auto;margin:0;background:var(--hero-dark)} /* height:auto overrides the old mobile photo band (home-overview.css) so the photo fills the hero */
.hp-hero.hp-hero-cover .hp-hero-visual>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:1}
.hp-hero.hp-hero-cover .hp-hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,11,.66) 0%,rgba(13,12,11,.56) 30%,rgba(13,12,11,.3) 58%,rgba(13,12,11,.05) 100%),linear-gradient(180deg,rgba(13,12,11,.32),rgba(13,12,11,.04) 30%,rgba(13,12,11,.06) 62%,rgba(13,12,11,.46))} /* lighter on the left so the flowers show on desktop (2026-09-26); top/bottom shade eased 2026-10-02 (owner: brighter background) */
.hp-hero.hp-hero-cover .hp-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:min(1240px,100%);margin:0 auto;padding:clamp(72px,10vw,128px) clamp(28px,5vw,72px)}
.hp-hero.hp-hero-cover h1{margin:0;padding:0;line-height:0}
/* margin-left: the image's transparent left margin (95/2610 of its width) is pulled back so the letters line up with the line below */
.hp-hero.hp-hero-cover .hp-hero-wordmark{display:block;width:min(540px,70vw);margin-left:calc(min(540px,70vw)*-95/2610);height:auto;opacity:1;filter:drop-shadow(0 2px 18px rgba(0,0,0,.62)) drop-shadow(0 0 3px rgba(0,0,0,.45))} /* shadow strengthened 2026-10-02 so the wordmark stays legible over the brighter photo */
.hp-hero.hp-hero-cover .hp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hp-hero.hp-hero-cover .hp-hero-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:30px 0 0;color:#d8d0c3;text-shadow:0 1px 10px rgba(0,0,0,.6);font-size:12px;line-height:1.8;letter-spacing:.18em}
.hp-hero.hp-hero-cover .hp-hero-est{font-family:var(--latin,"Baskerville",serif);font-size:10px;letter-spacing:.26em;color:#8d8474}
.hp-hero.hp-hero-cover .hp-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;margin-top:46px}
.hp-hero.hp-hero-cover .hp-hero-scroll{position:absolute;left:50%;bottom:16px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-family:var(--latin,"Baskerville",serif);font-size:10px;letter-spacing:.3em;text-decoration:none;opacity:.9}
.hp-hero.hp-hero-cover .hp-hero-scroll::after{content:"";width:1px;height:56px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));transform-origin:top;animation:hpDrop 2.4s ease-in-out infinite}
@keyframes hpDrop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hp-hero.hp-hero-cover .hp-hero-tour{display:inline-flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid rgba(243,239,232,.35);color:var(--hero-muted);font-size:12px;line-height:1.6;letter-spacing:.14em;text-decoration:none;transition:color .3s ease,border-color .3s ease}
.hp-hero.hp-hero-cover .hp-hero-tour:hover{color:var(--hero-ink);border-color:#d3c3a3}
.hp-hero.hp-hero-cover .hp-book{display:inline-flex;align-items:center;gap:28px;margin-top:0;padding:15px 26px 15px 28px;border:1px solid rgba(243,239,232,.5);color:var(--hero-ink);font-size:13px;line-height:1.6;letter-spacing:.14em;text-decoration:none;background:transparent;transition:border-color .3s ease,background .3s ease}
.hp-hero.hp-hero-cover .hp-book:hover{border-color:#d3c3a3;background:rgba(255,255,255,.05)}
html[lang^="en"] .hp-home .hp-hero.hp-hero-cover .hp-hero-line{letter-spacing:.12em}
/* Phones (2026-10-04, owner chose the AHKAH home page as the model; PC and tablets keep the hero above).
   First screen: the corridor photograph, untouched except for a short fade at the top that continues the dark header
   into it, with the wordmark and the line of place and year in that fade; the news line sits just above the booking bar.
   On scrolling, the news line goes, the photograph stays where it is (sticky) and darkens a little (--hero-dim, set by
   home-overview.js), and the WHY HILLS GRACE heading (copied into the hero by build_home.py) passes over it in white;
   then the white section with the three reasons follows. The header is transparent over the photograph (no small
   wordmark while the large one is in view) and turns dark when the WHY heading reaches it, so the heading passes under a
   dark header (body.hp-hero-past). */
.hp-hero.hp-hero-cover .hp-hero-why{display:none}
@media(max-width:700px){
  .hp-hero.hp-hero-cover{--hero-hdr:var(--hp-hdr-h,69px);--hero-h:max(480px,calc(100svh - 61px));display:block;min-height:0;height:auto;margin-top:calc(-1 * var(--hero-hdr));overflow:visible}
  .hp-hero.hp-hero-cover .hp-hero-scroll{display:none}
  .hp-hero.hp-hero-cover .hp-hero-visual{position:sticky;inset:auto;top:0;height:var(--hero-h);overflow:hidden}
  .hp-hero.hp-hero-cover .hp-hero-visual>img{object-position:26% 50%;opacity:calc(1 - var(--hero-dim,0))} /* 2026-10-04 owner: more of the flowers on the left; the dark ground shows through as it dims */
  .hp-hero.hp-hero-cover .hp-hero-visual::after{inset:0 0 auto;height:calc(var(--hero-hdr) + 230px);background:linear-gradient(180deg,rgba(20,17,14,.76) 0%,rgba(20,17,14,.6) 22%,rgba(20,17,14,.46) 42%,rgba(20,17,14,.33) 58%,rgba(20,17,14,.16) 76%,rgba(20,17,14,.05) 90%,rgba(20,17,14,0) 100%)}
  .hp-hero.hp-hero-cover .hp-hero-copy{position:relative;inset:auto;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:auto;height:var(--hero-h);margin:calc(-1 * var(--hero-h)) 0 0;padding:calc(var(--hero-hdr) + 27px) 20px 0;text-align:center;pointer-events:none}
  .hp-hero.hp-hero-cover .hp-hero-wordmark{width:min(84vw,420px);margin:0 auto;filter:drop-shadow(0 1px 8px rgba(0,0,0,.25))}
  .hp-hero.hp-hero-cover .hp-hero-line{justify-content:center;gap:6px 14px;margin:12px 0 0;color:#f3efe8;font-size:11.5px;letter-spacing:.16em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
  .hp-hero.hp-hero-cover .hp-hero-est{color:#e2d3b3}
  .hp-hero.hp-hero-cover .hp-hero-actions{display:none} /* 2026-10-04 owner: no reservation button in the phone hero (the booking bar does that job) */
  /* WHY HILLS GRACE over the photograph, then the white section without its own heading */
  .hp-hero.hp-hero-cover .hp-hero-why{position:relative;z-index:1;display:block;padding:14vh 30px max(18vh,calc(38vh - 96px));text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.22),0 0 22px rgba(0,0,0,.28)} /* bottom: 38vh before the scroll cue was added; the cue takes about 96px of it */
  .hp-hero.hp-hero-cover .hp-hero-why-kicker{margin:0;font-family:var(--latin,"Marcellus",serif);font-size:11.5px;letter-spacing:.24em;color:#efe3c8}
  .hp-hero.hp-hero-cover .hp-hero-why-title{margin:16px 0 0;font-family:var(--mincho,serif);font-size:27px;font-weight:400;line-height:1.6;letter-spacing:.06em;color:#fff}
  .hp-hero.hp-hero-cover .hp-hero-why-intro{max-width:21em;margin:18px auto 0;font-size:14px;line-height:2.05;letter-spacing:.06em;color:#fff}
  /* 2026-10-06 (owner): a scroll cue under the WHY text — the PC hero's SCROLL mark (a falling line), centred under the copy */
  .hp-hero.hp-hero-cover .hp-hero-why-scroll{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin:36px auto 0;padding:4px 12px 0;color:#fff;font-family:var(--latin,"Baskerville",serif);font-size:10.5px;line-height:1;letter-spacing:.3em;text-decoration:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.3))}
  .hp-hero.hp-hero-cover .hp-hero-why-scroll span{margin-right:-.3em} /* the letter-spacing after the last letter would push the word off the line's centre */
  .hp-hero.hp-hero-cover .hp-hero-why-scroll::after{content:"";width:1px;height:56px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));transform-origin:top;animation:hpDrop 2.4s ease-in-out infinite}
  html:has(#view-home:not([hidden])) #concept .hp-reasons3-head{display:none}
  /* the news line: just above the booking bar on the first screen, gone once the page scrolls (body.hp-scrolled) */
  html:has(#view-home:not([hidden])) .hp-page #news-latest{position:fixed;left:0;right:0;bottom:61px;z-index:104;border-top:1px solid rgba(255,255,255,.08);transition:opacity .35s ease,transform .35s ease,visibility .35s}
  html:has(#view-home:not([hidden])) .hp-page.hp-scrolled #news-latest{opacity:0;visibility:hidden;transform:translateY(12px)}
  html:has(#view-home:not([hidden])) .hp-page #news-latest .hp-news-bar-wrap{padding:9px 14px 10px;gap:4px 10px}
  html:has(#view-home:not([hidden])) .hp-page #news-latest .hp-news-bar-label{font-size:11px;letter-spacing:.14em}
  html:has(#view-home:not([hidden])) .hp-page #news-latest .hp-news-bar-link{display:flex;align-items:baseline;gap:10px}
  html:has(#view-home:not([hidden])) .hp-page #news-latest .hp-news-bar-date{display:none} /* the title needs the width on this one line */
  html:has(#view-home:not([hidden])) .hp-page #news-latest .hp-news-bar-text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;letter-spacing:.02em;-webkit-line-clamp:none}
  html:has(#view-home:not([hidden])) .hp-page #news-latest .hp-news-bar-all{font-size:11px;gap:4px}
  html:has(#view-home:not([hidden])) .hp-page .aibtn{transition:opacity .4s ease,transform .4s ease,visibility .4s,bottom .35s ease}
  html:has(#view-home:not([hidden])) .hp-page:not(.hp-scrolled) .aibtn{bottom:calc(74px + var(--hp-news-h,44px))}
  /* the header */
  html:has(#view-home:not([hidden])) .hp-page .hdr{transition:background-color .35s ease,border-color .35s ease}
  html:has(#view-home:not([hidden])) .hp-page:not(.hp-hero-past) .hdr{background:transparent;border-bottom-color:transparent}
  html:has(#view-home:not([hidden])) .hp-page .hdr .brand{transition:opacity .35s ease,visibility .35s ease}
  html:has(#view-home:not([hidden])) .hp-page:not(.hp-hero-past):not(.hp-hero-mark-gone) .hdr .brand{opacity:0;visibility:hidden}
}
/* PC: the right side of the photograph brighter (owner, 2026-09-27; more so 2026-10-02). The left keeps its shade for the words. */
@media(min-width:1181px){
  .hp-hero.hp-hero-cover{min-height:max(520px,calc(100vh - 122px))} /* 2026-10-04: no strip above the header now; one screen = header 69 + hero + NEWS 53 */
  .hp-hero.hp-hero-cover .hp-hero-visual::after{background:linear-gradient(90deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.2) 62%,rgba(255,255,255,.42) 100%),linear-gradient(90deg,rgba(13,12,11,.66) 0%,rgba(13,12,11,.54) 24%,rgba(13,12,11,.18) 42%,rgba(13,12,11,0) 56%),linear-gradient(180deg,rgba(13,12,11,.2),rgba(13,12,11,.02) 30%,rgba(13,12,11,.02) 62%,rgba(13,12,11,.22))} /* 2026-10-02 (owner, 2nd request): right side brighter still */
}
@media(prefers-reduced-motion:reduce){.hp-hero.hp-hero-cover .hp-book{transition:none}.hp-hero.hp-hero-cover .hp-hero-scroll::after,.hp-hero.hp-hero-cover .hp-hero-why-scroll::after{animation:none}html:has(#view-home:not([hidden])) .hp-page .hdr,html:has(#view-home:not([hidden])) .hp-page .hdr .brand{transition:none}}