/* ============================================================================
   Receive Reiki - the light homepage (preview, October 2026).

   The approved mockup's own sections. Loaded on the homepage only, AFTER site.css, and scoped to
   body.home-light. The palette, header, footer, buttons and phone booking bar are shared and live
   in site.css (its "light design system" section); this file holds only what is unique to the
   homepage.

   Gold carries white button text, so the button gold is a little deeper than the mockup's
   (white on its lightest stop, #946b1f, is 4.8:1, AA for normal text; the mockup's #b8892f would be 3.2:1).
   ========================================================================== */

body.home-light {
  --hl-ink: #12333b;          /* deep teal: headings, nav */
  --hl-text: #3b4a4f;         /* body copy, 8.5:1 on cream */
  --hl-soft: #4f5b5f;
  --hl-cream: #fbf6ec;
  --hl-ivory: #fffdf8;
  --hl-sand: #f4ecdc;
  --hl-line: #eadfca;
  --hl-gold: #b8892f;         /* icons, rules, numerals */
  --hl-gold-text: #8a6420;    /* gold words on cream, 5:1 */
  --hl-btn: var(--btn-gold);
  --hl-teal: #0f3b43;         /* footer */
  --hl-shadow: 0 1px 2px rgba(80, 60, 20, .05), 0 8px 24px rgba(80, 60, 20, .07);
  background: var(--hl-cream);
  color: var(--hl-text);
}
.home-light main { display: block; }
.home-light main p, .home-light main li { max-width: none; }
.home-light h1, .home-light h2, .home-light h3 { color: var(--hl-ink); font-weight: 600; }
/* The sticky header would otherwise cover the heading an in-page link lands on. */
.home-light [id] { scroll-margin-top: 5.5rem; }
:where(.home-light) section { padding-block: 0; }  /* zero specificity: each band sets its own */

.hl-wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 30rem) { .hl-wrap { width: min(100% - 1.75rem, var(--wrap)); } }

.hl-center { text-align: center; }
.hl-h2 { font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.75rem); letter-spacing: -0.015em; margin-bottom: .35em; }
.hl-sub { font-size: clamp(1.02rem, .97rem + .25vw, 1.18rem); color: var(--hl-soft); margin: 0 auto; }

/* ---------------------------------------------------------------- buttons */

.hl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: .8rem 1.7rem; border-radius: 999px;
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hl-btn-gold {
  background: var(--hl-btn); color: #fff;
  box-shadow: 0 2px 6px rgba(120, 85, 20, .25), inset 0 1px 0 rgba(255, 240, 200, .35);
}
.hl-btn-gold:hover, .hl-btn-gold:focus-visible { color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(120, 85, 20, .28); }
.hl-btn-line {
  background: rgba(255, 253, 248, .9); color: var(--hl-ink);
  border: 1.5px solid #5d7177;
}
.hl-btn-line:hover, .hl-btn-line:focus-visible { color: var(--hl-ink); background: #fff; transform: translateY(-1px); }
.hl-arrow { font-size: 1.1em; line-height: 1; }

.hl-textlink {
  display: inline-block; color: var(--hl-ink); font-weight: 600; text-decoration: none;
  padding-block: .55rem .45rem;
  background: linear-gradient(90deg, var(--hl-line) 0 38%, var(--hl-gold) 38% 62%, var(--hl-line) 62% 100%) left bottom / 100% 2px no-repeat;
}
.hl-textlink:hover { color: var(--hl-gold-text); }

/* ---------------------------------------------------------------- ornaments */

.hl-ornament { display: flex; align-items: center; justify-content: center; gap: .9rem; color: var(--hl-gold); margin-top: 1.4rem; }
.hl-ornament::before, .hl-ornament::after { content: ""; width: 3.5rem; height: 1px; background: currentColor; opacity: .55; }
.hl-ornament svg { width: 1.9rem; height: 1.2rem; }
.hl-ornament-wide::before, .hl-ornament-wide::after { width: min(9rem, 22vw); }

/* ---------------------------------------------------------------- 1. hero */

.hl-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hl-cream); padding: 0; }
.hl-hero-art, .hl-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-hero-art { z-index: -1; }
.hl-hero-art img { object-fit: cover; object-position: 72% 50%; }
.hl-hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(251, 246, 236, .96) 0%, rgba(251, 246, 236, .9) 30%, rgba(251, 246, 236, .55) 46%, rgba(251, 246, 236, 0) 62%);
}
.hl-hero-inner { min-height: clamp(30rem, 37vw, 41rem); display: flex; align-items: center; padding-block: 3.5rem; }
.hl-hero-copy { max-width: 41rem; }
.hl-hero-copy > p { max-width: 35rem; }
.hl-hero h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: .45em; }
.hl-hero-copy > p { font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); line-height: 1.6; color: #36464b; margin-bottom: 1.8rem; }
.hl-hero .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; }
.hl-tagline {
  position: absolute; right: clamp(1.25rem, 4vw, 3.5rem); top: 19%;
  margin: 0; padding-left: .9rem; border-left: 1.5px solid rgba(221, 186, 115, .9);
  font-size: .8rem; letter-spacing: .16em; line-height: 1.75; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 6px rgba(20, 35, 40, .55);
}
.hl-tagline span { display: block; }
@media (max-width: 52rem) {
  .hl-hero-art { position: relative; height: 64vw; max-height: 26rem; }
  .hl-hero-art img { object-position: 84% 50%; }
  .hl-hero-art::after { background: linear-gradient(180deg, rgba(251, 246, 236, 0) 55%, rgba(251, 246, 236, .85) 88%, var(--hl-cream) 100%); }
  .hl-hero-inner { min-height: 0; padding-block: .5rem 3rem; margin-top: -2.5rem; position: relative; }
  .hl-tagline { top: 1.25rem; font-size: .72rem; }
}

/* ---------------------------------------------------------------- 2. the teaching */

.hl-teaching { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(2.75rem, 5vw, 3.75rem) clamp(2.25rem, 4vw, 3rem); }
.hl-teaching-art, .hl-teaching-art img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hl-teaching-art img { object-fit: cover; object-position: 50% 50%; }
.hl-teaching blockquote { margin: 0; }
.hl-teaching blockquote p {
  font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.85rem); line-height: 1.2; color: var(--hl-gold-text);
  margin: 0 auto .55em; letter-spacing: -0.01em; text-wrap: balance;
}
.hl-teaching blockquote p span, .hl-teaching .hl-teaching-text span { display: block; }
.hl-teaching-text { font-size: clamp(1rem, .96rem + .2vw, 1.12rem); color: #3a474b; margin: 0 auto; }
@media (max-width: 40rem) { .hl-teaching blockquote p span, .hl-teaching .hl-teaching-text span { display: inline; } }

/* ---------------------------------------------------------------- 3. what is reiki */

.hl-what { padding-block: clamp(3rem, 6vw, 4.75rem); background: linear-gradient(180deg, var(--hl-cream), #fcf8f0); }
.hl-cards5 { list-style: none; padding: 0; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }
.hl-card {
  background: rgba(255, 253, 248, .82); border: 1px solid var(--hl-line); border-radius: 12px;
  box-shadow: var(--hl-shadow); padding: 1.9rem 1.2rem 1.7rem; text-align: center;
}
.hl-card svg { width: 3rem; height: 3rem; margin: 0 auto 1.1rem; color: var(--hl-gold); }
.hl-card h3 { font-size: 1.22rem; line-height: 1.2; margin-bottom: .6rem; letter-spacing: -0.01em; }
.hl-card p { font-size: .97rem; line-height: 1.5; color: var(--hl-soft); margin: 0; }
@media (max-width: 64rem) { .hl-cards5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hl-cards5 > li { grid-column: span 2; } .hl-cards5 > li:nth-child(4) { grid-column: 2 / span 2; } }
@media (max-width: 40rem) {
  .hl-cards5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .hl-cards5 > li, .hl-cards5 > li:nth-child(4) { grid-column: auto; }
  .hl-cards5 > li:last-child { grid-column: 1 / -1; }
  .hl-card { padding: 1.4rem .9rem 1.3rem; }
  .hl-card h3 { font-size: 1.1rem; }
  .hl-card p { font-size: .93rem; }
}

/* ---------------------------------------------------------------- 4. more than a physical body */

.hl-body { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; background: var(--hl-cream); overflow: hidden; }
.hl-body-art img {
  width: 100%; height: 100%; min-height: 28rem; object-fit: cover; object-position: 40% 50%;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.hl-body-copy { padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem); max-width: 50rem; }
.hl-body-copy > p { font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); line-height: 1.62; color: #3a474b; }
.hl-body-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hl-body-list li { text-align: center; padding: 0 .55rem; border-left: 1px solid var(--hl-line); }
.hl-body-list li:first-child { border-left: 0; }
.hl-body-list svg { width: 2.9rem; height: 2.9rem; margin: 0 auto .7rem; color: var(--hl-gold); }
.hl-body-list strong { display: block; font-size: 1rem; color: var(--hl-ink); line-height: 1.25; margin-bottom: .4rem; }
.hl-body-list span { display: block; font-size: .9rem; line-height: 1.4; color: var(--hl-soft); }
@media (max-width: 56rem) {
  .hl-body { grid-template-columns: 1fr; }
  .hl-body-art img { min-height: 0; max-height: 28rem; aspect-ratio: 834 / 600; object-position: 40% 35%; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
  .hl-body-copy { padding: 1rem 1.25rem 3rem; margin-inline: auto; }
}
@media (max-width: 40rem) {
  .hl-body-list { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.6rem; }
  .hl-body-list li { grid-column: span 2; }
  .hl-body-list li:nth-child(4) { grid-column: 2 / span 2; border-left: 0; }
  .hl-body-list li:nth-child(5) { grid-column: 4 / span 2; }
}

/* ---------------------------------------------------------------- 5. teachings */

.hl-teachings { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 4.5rem); background: linear-gradient(180deg, #fbf5e9, #f8f0e1); }
.hl-leaves { position: absolute; color: #7f9168; opacity: .8; pointer-events: none; }
.hl-leaves-tl { left: -1rem; top: -.5rem; width: clamp(5rem, 9vw, 8.5rem); }
.hl-leaves-tr { right: -1.25rem; top: -1rem; width: clamp(5.5rem, 10vw, 9.5rem); transform: scaleX(-1); }
.hl-leaves-bl { left: -1.25rem; bottom: -1rem; width: clamp(4.5rem, 8vw, 7.5rem); transform: rotate(-12deg); }
.hl-cards8 { z-index: 1; list-style: none; padding: 0; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.1rem; counter-reset: teach; position: relative; }
/* Four teachings, then three, then the eighth across the whole width: it is four paragraphs long
   (owner's wording, October 2026), and in a quarter-width column it would stretch its row. */
.hl-cards8 > li { grid-column: span 3; }
.hl-cards8 > li:nth-child(n+5) { grid-column: span 4; }
.hl-cards8 > li.hl-teach-long { grid-column: 1 / -1; padding: 1.7rem 2rem 1.6rem 1.6rem; }
.hl-cards8 li {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: rgba(255, 253, 248, .85); border: 1px solid var(--hl-line); border-radius: 12px;
  box-shadow: var(--hl-shadow); padding: 1.45rem 1.35rem; font-size: 1.04rem; line-height: 1.5; color: #34444a;
}
.hl-num {
  flex: none; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d5b06a, #b8892f 70%); color: #fff;
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 600;
  box-shadow: 0 1px 3px rgba(120, 85, 20, .3); text-shadow: 0 1px 1px rgba(90, 60, 10, .45);
}
.hl-cards8 li > div p { margin: 0; }
.hl-cards8 li > div p + p { margin-top: .5rem; }
.hl-teach-long > div { max-width: 52rem; }
.hl-teach-long p { margin: 0 0 .75rem; }
.hl-teach-long p:last-child { margin-bottom: 0; }
.hl-teach-bold { font-family: var(--font-head); font-size: clamp(1.12rem, 1.04rem + .35vw, 1.3rem); line-height: 1.4; color: var(--hl-ink); }
.hl-teach-bold strong { font-weight: 600; }
.hl-teach-long .hl-teach-bold:last-child { color: var(--hl-gold-text); margin-top: 1rem; }
@media (max-width: 64rem) {
  .hl-cards8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-cards8 > li, .hl-cards8 > li:nth-child(n+5) { grid-column: auto; }
  .hl-cards8 > li:nth-child(7), .hl-cards8 > li.hl-teach-long { grid-column: 1 / -1; }
}
@media (max-width: 40rem) { .hl-cards8 { grid-template-columns: 1fr; gap: .75rem; } .hl-cards8 li, .hl-cards8 > li.hl-teach-long { padding: 1.1rem 1.1rem; } }

/* ---------------------------------------------------------------- 6. love moves life */

.hl-love { position: relative; isolation: isolate; overflow: hidden; }
.hl-love-art, .hl-love-art img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hl-love-art img { object-fit: cover; object-position: 50% 60%; }
.hl-love-inner { min-height: clamp(18rem, 21.7vw, 26rem); padding-block: clamp(2.25rem, 3.5vw, 3.25rem); }
.hl-love-copy { max-width: 46rem; padding-left: clamp(0rem, 4vw, 4rem); }
.hl-love h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); margin-bottom: .45em; }
.hl-love p { font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); line-height: 1.6; color: #2f3f44; margin: 0; text-shadow: 0 0 18px rgba(255, 246, 225, .9); }
@media (max-width: 52rem) {
  .hl-love { background: linear-gradient(180deg, #fbefd9, #f7e4c2); }
  .hl-love-art { position: relative; height: 52vw; max-height: 20rem; }
  .hl-love-art img { object-position: 86% 50%; }
  .hl-love-inner { min-height: 0; padding-block: 2.5rem 1.75rem; }
  .hl-love-copy { padding-left: 0; }
  .hl-love p { text-shadow: none; }
}

/* ---------------------------------------------------------------- 7. services */

.hl-services { padding-block: clamp(3rem, 6vw, 4.5rem); background: linear-gradient(180deg, #fcf9f2, var(--hl-cream)); }
.hl-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.2vw, 1.75rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hl-svc {
  display: flex; flex-direction: column; background: var(--hl-ivory); border: 1px solid var(--hl-line);
  border-radius: 12px; overflow: hidden; box-shadow: var(--hl-shadow);
}
.hl-svc img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.hl-svc-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.7rem; }
.hl-svc h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); line-height: 1.2; margin-bottom: .55rem; }
.hl-svc p { font-size: 1rem; line-height: 1.55; color: var(--hl-soft); margin: 0 0 1.4rem; }
.hl-svc .hl-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 56rem) { .hl-svc-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

/* ---------------------------------------------------------------- 8. my way of working */

/* The owner's portrait, whole and untouched, in a framed plate. Owner's rule (2026-10-18): no
   gradient, fade or overlay across the face or eyes, so nothing is drawn ON the photograph at all;
   the warm glow is a separate layer BEHIND the frame. */
.hl-work {
  display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.25rem, 6vw, 5rem);
  padding-inline: max(1.25rem, calc((100vw - var(--wrap)) / 2));
  background: linear-gradient(90deg, #f6ecd9 0%, var(--hl-cream) 55%);
  overflow: hidden;  /* the glow behind the portrait is wider than a phone */
}
.hl-work-photo { position: relative; display: grid; place-items: center; isolation: isolate; }
.hl-work-photo::before {
  content: ""; position: absolute; z-index: -1; width: min(34rem, 120%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 196, 124, .5) 0%, rgba(230, 196, 124, .18) 45%, rgba(230, 196, 124, 0) 70%);
}
.hl-work-frame {
  margin: 0; width: min(24rem, 100%); border-radius: 18px; overflow: hidden; background: var(--bg-warm);
  box-shadow: 0 0 0 1px rgba(184, 137, 47, .4), 0 0 0 8px rgba(255, 253, 248, .85), 0 0 0 9px rgba(184, 137, 47, .22), 0 24px 48px -20px rgba(80, 60, 20, .35);
}
.hl-work-frame img { display: block; width: 100%; height: auto; }
.hl-work-copy { max-width: 40rem; }
.hl-work-copy > p { font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); line-height: 1.65; color: #3a474b; }
.hl-work .hl-ornament { margin-top: 1.6rem; }
@media (max-width: 56rem) {
  .hl-work { grid-template-columns: 1fr; gap: 2.25rem; padding-block: 3rem; }
  .hl-work-frame { width: min(20rem, 82vw); }
  .hl-work-copy { margin-inline: auto; }
}

/* ---------------------------------------------------------------- 9. allow yourself to receive */

.hl-receive { position: relative; isolation: isolate; overflow: hidden; text-align: center; }
.hl-receive-art, .hl-receive-art img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hl-receive-art img { object-fit: cover; object-position: 50% 50%; }
.hl-receive-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 60% at 50% 38%, rgba(255, 250, 238, .7), rgba(255, 250, 238, 0) 100%); }
.hl-receive-inner { min-height: clamp(20rem, 24vw, 28rem); padding-block: clamp(2.5rem, 3.5vw, 3.25rem) 6rem; }
.hl-receive h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); margin-bottom: .4em; }
.hl-receive p { font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); color: #2f3f44; margin: 0 auto 1.6rem; }
.hl-receive .hl-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.1rem; }
@media (max-width: 52rem) {
  .hl-receive-art img { object-position: 12% 50%; }
  .hl-receive-art::after { background: linear-gradient(180deg, rgba(255, 250, 238, .82) 0%, rgba(255, 250, 238, .7) 55%, rgba(255, 250, 238, .1) 100%); }
  .hl-receive-inner { padding-block: 3rem 9rem; }
}

.home-light :where(a, button, summary):focus-visible { outline: 2px solid var(--hl-gold-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hl-btn { transition: none; } .hl-btn:hover { transform: none; } }