/* Homepage hero (the concept Rena approved, 29 September 2026). An editorial composition instead of a full-bleed
   slideshow: the words on one side, and on the other Serena and the team in an arched frame with one food card that
   moves through a few photos of each service. Uses the site's own tokens, type, buttons and stamp. */

.hc{
  --hc-bg:#140b19; --hc-bg2:#2a1433; --hc-ink:#fff; --hc-muted:rgba(255,255,255,.78); --hc-faint:rgba(255,255,255,.56);
  --hc-line:rgba(216,182,232,.34); --hc-card:#1d1024; --hc-frame:rgba(255,255,255,.06);
  position:relative; overflow:hidden; color:var(--hc-ink); padding:0;
  background:radial-gradient(120% 90% at 78% 40%, #3a1d47 0%, var(--hc-bg2) 38%, var(--hc-bg) 78%);
  min-height:max(640px, 100svh);
  display:flex; align-items:center;
}
[data-theme="light"] .hc{
  --hc-bg:#f4ebf6; --hc-bg2:#fbf6f0; --hc-ink:#2a1433; --hc-muted:rgba(42,20,51,.78); --hc-faint:rgba(42,20,51,.6);
  --hc-line:rgba(110,61,138,.3); --hc-card:#fff; --hc-frame:rgba(42,20,51,.05);
  background:radial-gradient(120% 90% at 78% 40%, #efe0f5 0%, var(--hc-bg2) 45%, var(--hc-bg) 100%);
}
/* a soft light behind the portrait, and a fine grain so the dark never looks flat */
.hc-glow{position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(38% 42% at 72% 44%, rgba(185,139,209,.28), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
[data-theme="light"] .hc-glow{opacity:.8; background:radial-gradient(38% 42% at 72% 44%, rgba(160,120,180,.22), transparent 70%)}

.hc-inner{position:relative; z-index:1; width:100%; max-width:1440px; margin:0 auto;
  padding:calc(var(--nav-h, 72px) + clamp(28px, 6vh, 64px)) var(--gutter) clamp(40px, 8vh, 88px);
  display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 5vh, 48px); align-items:center}

/* ---------- words ---------- */
.hc-text{max-width:640px; container-type:inline-size}
.hc-eyebrow{display:flex; flex-wrap:wrap; gap:.4em 2.2em; font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-text, #d2abe3); margin-bottom:1.4rem}
[data-theme="light"] .hc-eyebrow{color:var(--plum)}
/* sized to its own column, so "Serving Love" always stays on one line */
.hc-title{font-size:clamp(2.6rem, 16cqi, 6.6rem); font-weight:500; line-height:.98; letter-spacing:-.025em; color:var(--hc-ink); text-wrap:balance}
.hc-title .script{color:var(--lavender); font-size:1.12em; line-height:1.05}
[data-theme="light"] .hc-title .script{color:var(--plum)}
.hc-lead{margin-top:1.4rem; font-size:var(--fs-lead); color:var(--hc-muted); font-weight:500; max-width:34ch}
.hc-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem}
[data-theme="light"] .hc .btn-ghost-light{--btn-fg:var(--aubergine); color:var(--aubergine); border-color:rgba(42,20,51,.35); background:rgba(255,255,255,.5)}
.hc-tertiary{margin-top:1.1rem; font-size:.95rem; color:var(--hc-faint)}
.hc-tertiary a{color:var(--hc-ink); text-underline-offset:4px}
/* the verse: one quiet line across the foot of the hero, the reference beside it */
.hc-verse{grid-column:1 / -1; margin:0; padding-top:clamp(16px, 2.4vh, 24px); border-top:1px solid var(--hc-line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3em 1.6em;
  font-family:var(--font-display); font-style:italic; font-size:.95rem; line-height:1.5; color:var(--hc-faint)}
.hc-verse cite{font-family:var(--font-text); font-style:normal; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text, #d2abe3); white-space:nowrap}
[data-theme="light"] .hc-verse cite{color:var(--plum)}
@media (min-width:900px){ .hc-verse{flex-wrap:nowrap; white-space:nowrap} }

/* ---------- the composition ---------- */
.hc-stage{position:relative; justify-self:center; width:min(100%, 560px); aspect-ratio:560 / 640}
.hc-ring{position:absolute; left:50%; top:50%; width:108%; transform:translate(-54%, -50%); overflow:visible; pointer-events:none}
.hc-ring circle{fill:none; stroke:var(--hc-line); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:0}
/* the portrait: an arch, like a menu board or a chapel window; sized so the source is never upscaled */
.hc-portrait{position:absolute; right:4%; top:0; width:68%; aspect-ratio:1100 / 1540; margin:0; overflow:hidden;
  border-radius:999px 999px 28px 28px; background:#e9e4e6; box-shadow:0 30px 80px rgba(0,0,0,.38), 0 0 0 1px var(--hc-frame)}
.hc-portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity 1.6s var(--ease-in-out, ease)}
.hc-portrait img.is-active{opacity:1}
.motion .hc-portrait img.is-active{animation:hcDrift 11s linear both}
/* a faint lilac wash takes the edge off the studio white, so the photo belongs to the dark page */
.hc-portrait::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(160,120,180,.22), rgba(160,120,180,0) 45%, rgba(20,11,25,.18))}
[data-theme="light"] .hc-portrait::after{background:linear-gradient(180deg, rgba(230,212,239,.35), rgba(230,212,239,0) 45%)}
/* the food card overlaps the portrait's lower corner */
.hc-food{position:absolute; left:0; bottom:0; width:46%; z-index:2}
.hc-food-frame{position:relative; aspect-ratio:4 / 5; border-radius:22px; overflow:hidden; background:var(--hc-card);
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 6px var(--hc-bg2)}
[data-theme="light"] .hc-food-frame{box-shadow:0 24px 60px rgba(42,20,51,.22), 0 0 0 6px #fff}
.hc-food-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease-in-out, ease)}
.hc-food-slide.is-active{opacity:1; z-index:1}
.hc-food-slide img{width:100%; height:100%; object-fit:cover; display:block}
.hc-food-slide:focus-visible{outline:3px solid var(--lavender); outline-offset:-3px}
.hc-food-foot{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:12px; padding:0 4px}
.hc-food-caption{font-family:var(--font-display); font-style:italic; font-size:1.02rem; color:var(--hc-ink)}
.hc-food-dots{display:flex; gap:2px; margin-left:-6px}
.hc-food-dot{position:relative;width:28px; height:28px; display:grid; place-items:center; border:0; background:none; padding:0; cursor:pointer}
.hc-food-dot::before{content:""; width:16px; height:2px; border-radius:2px; background:var(--hc-line);
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-size:0 100%; color:var(--hc-ink)}
.hc-food-dot.is-active::before{background-size:100% 100%}
/* the bar spans the whole service (all its photos), so it moves on when the caption does */
.motion .hc-food-dot.is-active::before{background-size:0 100%; animation:hcFill var(--hc-dur, 10s) linear forwards}
.hc.is-paused .hc-food-dot.is-active::before{animation-play-state:paused}
@keyframes hcFill{to{background-size:100% 100%}}
.hc-food-dot:focus-visible{outline:2px solid var(--lavender); outline-offset:2px; border-radius:6px}
.hc-stamp{position:absolute; z-index:3; right:-2%; top:auto; bottom:24%; width:104px; height:104px}
.hc-stamp text{white-space:pre}

/* ---------- the 5-star rating gets its moment: a warm flash, a halo and a light sweeping across ---------- */
.hc-flash{position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle, rgba(212,168,83,.55), rgba(212,168,83,0) 62%)}
.hc-sheen{position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none}
.hc-sheen::before{content:""; position:absolute; top:-30%; bottom:-30%; left:-60%; width:60%; transform:translateX(-40%) skewX(-18deg);
  background:linear-gradient(90deg, rgba(255,247,222,0), rgba(255,247,222,.75) 50%, rgba(255,247,222,0)); mix-blend-mode:screen; opacity:0}
.hc-stamp::after{content:""; position:absolute; inset:-2px; border-radius:50%; border:1.5px solid rgba(212,168,83,.95); opacity:0; pointer-events:none}
.hc-star{display:inline-block}
.motion .hc-sheen::before{animation:hcSheen 9s var(--ease-in-out, ease) 2.2s infinite}
.motion .hc-flash{animation:hcFlash 9s ease-out 2.2s infinite}
.motion .hc-stamp::after{animation:hcHalo 9s ease-out 2.2s infinite}
.motion .hc-star{animation:hcStar 9s ease-out 2.2s infinite}
@keyframes hcSheen{0%{transform:translateX(-40%) skewX(-18deg); opacity:1} 14%{transform:translateX(330%) skewX(-18deg); opacity:1} 14.1%, 100%{opacity:0}}
@keyframes hcFlash{0%, 100%{opacity:0} 7%{opacity:1} 22%{opacity:0}}
@keyframes hcHalo{0%{opacity:0; transform:scale(1)} 6%{opacity:.9} 24%{opacity:0; transform:scale(1.45)} 100%{opacity:0; transform:scale(1.45)}}
@keyframes hcStar{0%, 100%{color:#fff; text-shadow:none; transform:none} 7%{color:#f3d58a; text-shadow:0 0 16px rgba(212,168,83,.9); transform:scale(1.08)} 26%{color:#fff; text-shadow:none; transform:none}}

/* ---------- larger screens: words left, composition right ---------- */
@media (min-width:720px){
  .hc-inner{grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(24px, 5vw, 96px)}
  /* sized by the screen's height too, so the verse line under it stays on the first screen */
  .hc-stage{justify-self:end; width:min(100%, 600px, calc((100svh - 290px) * .875))}
  .hc-inner{padding-top:calc(var(--nav-h, 72px) + clamp(20px, 4vh, 48px)); padding-bottom:clamp(24px, 4vh, 44px); row-gap:clamp(20px, 3vh, 32px)}
}
@media (min-width:1500px){ .hc-stage{width:min(100%, 640px, calc((100svh - 290px) * .875))} }

/* ---------- phones: the words first (the headline is the first thing read), then the pictures ---------- */
@media (max-width:719px){
  .hc{min-height:auto; align-items:flex-start}
  .hc-inner{padding-top:calc(var(--nav-h, 64px) + 28px)}
  .hc-stage{width:min(100%, 420px)}
  .hc-text{text-align:left}
  .hc-verse{font-size:.88rem}
}
@media (max-width:520px){
  .hc-inner{gap:32px; padding-bottom:36px}
  .hc-stage{width:100%; aspect-ratio:1 / 1.02}
  .hc-portrait{width:62%; right:2%}
  .hc-food{width:46%}
  .hc-food-foot{margin-top:8px}
  .hc-food-caption{font-size:.9rem}
  .hc-lead{margin-top:1rem}
  .hc-btns{margin-top:1.4rem}
  .hc-eyebrow{font-size:.7rem; letter-spacing:.16em}
  .hc-stamp{width:84px; height:84px; right:0; bottom:30%}
  .hc-stamp .stamp-core{font-size:1.2rem}
  .hc-eyebrow{margin-bottom:1rem}
}

/* ---------- arrival: the frames rise and unveil once, then settle; gentle drift afterwards ---------- */
.motion .hc-portrait{animation:hcUnveil 1.4s var(--ease-settle, ease) .2s both}
.motion .hc-portrait img.is-active:first-child{animation:hcSettle 2.4s var(--ease-out, ease) .2s both}
.motion .hc-food{animation:hcRise 1.2s var(--ease-settle, ease) .7s both}
.motion .hc-ring circle{stroke-dashoffset:1; animation:hcDraw 2.2s var(--ease-out, ease) .4s forwards}
.motion .hc-stamp{animation:hcPop .9s var(--ease-settle, ease) 1.3s both}
.motion .hc-food-frame{animation:hcFloat 7s ease-in-out 2s infinite alternate}
@keyframes hcUnveil{from{clip-path:inset(100% 0 0 0 round 999px 999px 28px 28px); transform:translateY(24px)} to{clip-path:inset(0 0 0 0 round 999px 999px 28px 28px); transform:none}}
@keyframes hcSettle{from{transform:scale(1.12)} to{transform:scale(1)}}
@keyframes hcDrift{from{transform:scale(1.045)} to{transform:scale(1)}}
@keyframes hcRise{from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none}}
@keyframes hcDraw{to{stroke-dashoffset:0}}
@keyframes hcPop{from{opacity:0; transform:scale(.8) rotate(-20deg)} to{opacity:1; transform:none}}
@keyframes hcFloat{from{transform:translateY(0)} to{transform:translateY(-8px)}}
/* pointer parallax (fine pointers only): the layers move a few pixels against each other */
.hc-stage > *{transition:translate .6s var(--ease-out, ease)}
.hc-portrait{translate:calc(var(--px, 0) * -6px) calc(var(--py, 0) * -6px)}
.hc-food{translate:calc(var(--px, 0) * 10px) calc(var(--py, 0) * 10px)}
.hc-ring{translate:calc(var(--px, 0) * 4px) calc(var(--py, 0) * 4px)}
@media (prefers-reduced-motion: reduce){
  .hc *, .hc *::before, .hc *::after{animation:none !important; transition:none !important}
  .hc-stage > *{translate:none}
}
/* tablets held upright: no forced full-screen height, so there is no empty band under the composition */
@media (min-width:720px) and (orientation:portrait){ .hc{min-height:auto} }

/* ---------- the homepage's entrance, for this hero too ----------
   The site's timed entrance (headline lines rise, then the rest fades up) and its waits for the opening curtain
   (.intro) or the page-change veil (.arriving) are written for .hero; the same timings apply here. */
.motion .hc .split-line{animation:unclip 0s linear calc(var(--l,0) * 130ms + 1.15s) forwards}
.motion .hc .split-line>span{transform:none; animation:lineUp 1s var(--ease-settle) both; animation-delay:calc(var(--l,0) * 130ms + 120ms)}
.motion .hc [data-reveal]:not(h1){opacity:1; transform:none; animation:fadeUp .9s var(--ease-out) both; animation-delay:calc(var(--i,0) * 90ms + 200ms)}
.intro .hc .split-line{animation-delay:calc(var(--l,0) * 130ms + 2.1s)}
.intro .hc .split-line>span{animation-delay:calc(var(--l,0) * 130ms + 1.05s)}
.intro .hc [data-reveal]:not(h1){animation-delay:calc(var(--i,0) * 90ms + 1.1s)}
.arriving .hc .split-line{animation-delay:calc(var(--l,0) * 130ms + 1.4s)}
.arriving .hc .split-line>span{animation-delay:calc(var(--l,0) * 130ms + .38s)}
.arriving .hc [data-reveal]:not(h1){animation-delay:calc(var(--i,0) * 90ms + .42s)}
.hc .annot-svg{color:#d8b6e8}
[data-theme="light"] .hc .annot-svg{color:var(--accent-strong)}
/* the pictures wait for the curtain too, then arrive in the same order */
.intro .hc-portrait, .intro .hc-portrait img.is-active:first-child{animation-delay:1.15s}
.intro .hc-ring circle{animation-delay:1.3s}
.intro .hc-food{animation-delay:1.6s}
.intro .hc-stamp{animation-delay:2.2s}
.intro .hc-sheen::before, .intro .hc-flash, .intro .hc-stamp::after, .intro .hc-star{animation-delay:3.1s}
.arriving .hc-portrait, .arriving .hc-portrait img.is-active:first-child{animation-delay:.5s}
.arriving .hc-food{animation-delay:.9s}
.arriving .hc-stamp{animation-delay:1.4s}

.hc-food-dot::after{content:"";position:absolute;inset:-8px -2px}   /* 44px to touch, same look */