/* Solalfa home: a product still life framed by the brand's botanical ink. */
.sol-hero{background:var(--surface-cream);position:relative;overflow:hidden;isolation:isolate}
.sol-hero .hero-grid{position:relative;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:40px;padding-top:66px;padding-bottom:62px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;position:relative;z-index:2}
.hero-copy .eyebrow{font-size:11px;letter-spacing:.2em;line-height:1.6}
.hero-copy .h1{font-size:clamp(42px,4.6vw,58px);line-height:1.08;max-width:10.5em;text-wrap:balance;letter-spacing:-.025em}
.hero-copy .lead{font-size:16px;line-height:1.75;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:4px}
.hero-actions .btn-lg{font-size:14px;padding-inline:25px;height:52px;min-height:52px}
.hero-browse{display:inline-flex;gap:10px;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--text-heading);text-decoration:none}
.hero-browse svg{width:18px;height:18px;transition:transform var(--dur-slow) var(--ease-standard)}
.hero-browse:hover svg{transform:translateX(4px)}
/* No isolation or backdrop of its own: the photos multiply onto the section's
   cream (pixel-identical), so the corner drawings can pass beneath the scene. */
.hero-scene{position:relative;aspect-ratio:1.08;width:100%;max-width:520px;margin:0}
.hero-wash{position:absolute;inset:2% 12% 9% 12%;border-radius:48% 48% 24px 24px;background:var(--surface-section)}
.hero-arch{position:absolute;inset:0;width:100%;height:100%;color:var(--ms-support);z-index:0}
.hero-shot{position:absolute;display:block;mix-blend-mode:multiply;transform-origin:50% 80%;z-index:1}
.hero-shot img{width:100%;height:100%;object-fit:contain;display:block}
.hero-shot-serum{width:83%;height:92%;left:-9%;top:-4%;transform:rotate(-8deg)}
.hero-shot-gloss{width:47%;height:60%;right:4%;bottom:12%;transform:rotate(9deg)}
.hero-caption{position:absolute;bottom:0;left:13%;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.05em;color:var(--text-heading)}
.hero-caption>span:last-child{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:0}
.hero-botanical{position:absolute;pointer-events:none;fill:none;stroke:var(--text-heading);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;z-index:0;opacity:.32}
.hero-botanical-top{width:260px;height:247px;right:-15%;top:-13%;transform:rotate(12deg)}
.hero-botanical-bottom{width:250px;height:250px;left:-10%;bottom:2%;transform:rotate(-18deg);opacity:.26}
.hero-corner,.hero-sprig{position:absolute;pointer-events:none}
.hero-corner path,.hero-sprig path{stroke:var(--text-heading);fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-corner{left:-70px;top:-153px;width:420px;height:350px;opacity:.3}
.hero-corner path{stroke-width:1.2}
.hero-sprig{right:-90px;bottom:-14px;width:245px;height:245px;opacity:.55}
.hero-sprig path{stroke-width:1.4}
/* Corner lines may pass beneath hero text; a cream halo keeps the letters clear
   (invisible anywhere else, since it matches the ground). */
.hero-copy .eyebrow,.hero-copy .h1,.hero-copy .lead,.hero-browse,.hero-caption span{text-shadow:0 0 3px var(--surface-cream),0 0 8px var(--surface-cream),0 0 14px var(--surface-cream)}
.home-trust{background:var(--surface-cream);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.home-trust .band-row{justify-content:space-between;gap:8px 24px;font-size:12px;color:var(--text-muted);min-height:60px}
.home-trust .band-item::before{background:var(--ms-highlight-deep);width:5px;height:5px}
.home-order .pill-list{align-items:stretch;gap:14px}
.home-order .pill{padding:16px 22px;min-height:60px;box-shadow:none;border:1px solid var(--border-subtle);font-size:15px}
.home-order .pill .num{font-size:21px;color:var(--text-heading);min-width:27px}
.gracias{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(48px,7vw,64px);line-height:1;color:var(--text-on-band)}
.gracias-leaf{left:-45px;top:-32px;width:clamp(320px,32vw,480px);height:auto;color:var(--surface-cream);opacity:.95;--vine-start:.1s}

/* Botanical frond (Gracias band, after the Instagram "Gracias" post): slender
   solid leaves on a stem entering from the top-left. The stem grows in and
   each leaf, pointing toward the tip, unfurls as the stem reaches it: outline
   first, then the blade fills. The resting drawing is the default; motion only
   runs with no-preference. */
.vine{overflow:visible;pointer-events:none}
.vine path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.vine .vine-stem{stroke-width:1.7}
.vine .vine-blade{stroke-width:1;fill:currentColor}

/* Motion is kept to leaves. In the hero only the leaves of the two sprigs beside
   the photos grow from their stems (done by about 1.9 seconds); stems, arch,
   corner drawings and products are at rest from the first frame. The Gracias
   vine draws in once its band enters (about 3 seconds). Text and actions are
   always visible. CSS-only animation also works with the DC runtime's deferred
   mounting. */
@media (prefers-reduced-motion:no-preference){
  .hero-leaf{animation:vine-grow 1.1s cubic-bezier(.33,.12,.4,1) both;animation-delay:calc(.3s + var(--d,0s))}
  .hero-leaf path{stroke-dasharray:1;animation:vine-draw .8s cubic-bezier(.33,.12,.4,1) both;animation-delay:calc(.3s + var(--d,0s))}
  .hero-leaf path+path{animation-duration:.6s;animation-delay:calc(.52s + var(--d,0s))}
  .vine path{stroke-dasharray:1;animation:vine-draw .8s cubic-bezier(.33,.12,.4,1) both;animation-delay:calc(var(--vine-start,0s) + var(--d,0s))}
  .vine .vine-stem{animation-duration:1.9s}
  .vine .vine-blade{animation-name:vine-draw,vine-fill;animation-duration:.8s,.9s;animation-delay:calc(var(--vine-start,0s) + var(--d,0s)),calc(var(--vine-start,0s) + var(--d,0s) + .45s)}
  .vine .vine-leaf{animation:vine-grow 1.1s cubic-bezier(.33,.12,.4,1) both;animation-delay:calc(var(--vine-start,0s) + var(--d,0s))}
  /* Gracias waits below the fold: hold the drawing until reveal.js marks the
     band's block as entered. Without :has() support it simply runs on load. */
  .gracias-band:has(> [data-enter]:not([data-enter="in"])) .vine *{animation-play-state:paused}
}
@keyframes vine-draw{0%{stroke-dashoffset:1;opacity:0}6%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes vine-fill{from{fill-opacity:0}}
@keyframes vine-grow{from{scale:.6;rotate:var(--r,0deg)}}
@media(max-width:1050px) and (min-width:701px){
  .sol-hero .hero-grid{gap:28px;padding-top:54px;padding-bottom:54px}
  .hero-copy .h1{font-size:clamp(38px,4.8vw,50px)}
  .hero-copy .lead{font-size:15px;line-height:1.7}
  .hero-copy{gap:18px}
  .hero-actions{gap:4px 20px}
  .hero-botanical-top{right:-8%;width:190px;height:180px}
  .hero-botanical-bottom{width:200px;height:200px}
  .hero-corner{left:-79px;top:-149px;width:350px;height:292px}
  .hero-sprig{width:170px;height:170px;right:-70px;bottom:-70px}
  .hero-caption{left:8%;gap:8px;font-size:10px;letter-spacing:0;align-items:flex-start}
  .hero-caption>span:last-child{font-size:15px;white-space:nowrap}
}
@media(max-width:700px){
  .sol-hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:34px;padding-bottom:32px}
  .hero-copy{gap:18px}
  .hero-copy .eyebrow{font-size:10px;letter-spacing:.15em}
  .hero-copy .h1{font-size:clamp(36px,9vw,48px);line-height:1.1;max-width:12em;text-wrap:pretty}
  .hero-copy .lead{font-size:15px;line-height:1.65;max-width:48ch}
  .hero-actions{gap:4px 20px;width:100%;margin:0}
  .hero-actions .btn-lg{height:48px;min-height:48px;font-size:13px;padding-inline:20px}
  .hero-browse{font-size:13px}
  .hero-scene{max-width:330px;aspect-ratio:1.4;margin-inline:auto}
  .hero-shot-serum{height:103%;width:75%;left:3%;top:-12%}
  .hero-shot-gloss{height:64%;width:43%;right:5%;bottom:13%}
  .hero-wash{inset:0 14% 10% 15%}
  .hero-botanical-top{width:150px;height:175px;top:-11%;right:-7%}
  .hero-botanical-bottom{width:155px;height:155px;left:-5%;bottom:2%}
  .hero-sprig{width:125px;height:125px;right:-40px;bottom:-60px}
  .hero-caption{left:9%;right:3%;font-size:10px}
  .hero-caption>span:last-child{font-size:15px}
  .hero-corner{left:-88px;top:-114px;width:228px;height:190px}
  .home-trust .band-row{justify-content:flex-start;font-size:11px;gap:6px 18px;padding-block:14px}
  .home-order .pill{font-size:14px;padding:15px 18px}
  .gracias-leaf{left:-48px;top:-32px;width:clamp(130px,37vw,160px)}
}
@media(max-width:360px){.hero-actions .btn-lg{width:100%}.hero-browse{margin-inline:auto}.hero-copy .h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.hero-browse svg{transition:none}.hero-browse:hover svg{transform:none}}
@media print{.sol-hero *,.gracias-band *{animation:none!important}}

@media(min-width:701px) and (max-width:1050px){.gracias-leaf{width:clamp(220px,27vw,290px)}}