/* ==========================================================================
   Redesign pass (from the design research in _design/design-research.md)
   Type contrast, pill labels, floating header, tinted hero + rotating badge,
   pill marquee, pinned ritual story, word reveal, subtle texture.
   Loaded after style.css.
   ========================================================================== */

/* type: bigger contrast, tighter tracking */
h1{font-size:clamp(44px,8.6vw,92px);line-height:1;letter-spacing:-.03em}
h2{font-size:clamp(34px,6vw,62px);line-height:1.02;letter-spacing:-.028em}
h3{letter-spacing:-.02em}
.lead{font-size:16.5px;line-height:1.7}
.section{padding:72px 0}
@media(min-width:900px){.section{padding:128px 0}.section.tight{padding:56px 0}}

/* section labels become outlined pills */
.eyebrow{padding:7px 15px;border:1px solid rgba(156,122,50,.45);border-radius:30px;font-size:11px;letter-spacing:.18em;background:rgba(255,255,255,.4)}
.eyebrow::before{display:none}
.dark .eyebrow,.bandimg .eyebrow,.panel .eyebrow,.spot .eyebrow{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}

/* floating pill header */
.hdr{top:10px;background:none;border:0;padding:10px 0 0}
.hdr .bar{width:min(1240px,100% - 20px);height:62px;padding:0 10px 0 20px;background:rgba(253,251,246,.985);border:1px solid var(--line);border-radius:60px;box-shadow:0 12px 32px rgba(74,16,38,.09)}
.menu-open .hdr .bar{background:transparent;border-color:transparent;box-shadow:none}
@media(min-width:1040px){.hdr .bar{padding:0 10px 0 24px}}

/* hero panel (tinted like Done's product-coloured hero) */
.heropanel{margin:6px 10px 0;border-radius:32px;background:linear-gradient(165deg,#F7E9E5 0%,#F3E8DA 100%);position:relative;overflow:hidden}
.heropanel .bhero{padding-block:36px 64px}
.heropanel::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(110,31,58,.12),rgba(110,31,58,0) 68%);pointer-events:none}
@media(min-width:900px){.heropanel{border-radius:44px;margin:6px 20px 0}.heropanel .bhero{padding-block:72px 100px}}
.cols{position:relative}
.cols figure{box-shadow:0 26px 40px -18px rgba(74,16,38,.35)}
.badge{position:absolute;z-index:4;left:-10px;bottom:8px;width:92px;height:92px;border-radius:50%;background:var(--wine);display:grid;place-items:center;box-shadow:0 10px 28px rgba(74,16,38,.3)}
.badge svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.badge svg.ring text{font-family:var(--sans);font-size:10.4px;font-weight:700;letter-spacing:.2em;fill:#EBD7B0;text-transform:uppercase}
.badge svg.mark{width:30px;height:30px;stroke:#C9A55C;fill:none;stroke-width:1.5;stroke-linecap:round}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:900px){.badge{width:124px;height:124px;left:-40px;bottom:44px}.badge svg.mark{width:40px;height:40px}}

/* pill marquee (two rows, opposite directions) */
.pmq{overflow:hidden;padding:8px 0 4px;display:grid;gap:12px}
.pmq .row{display:flex;width:max-content;gap:12px;animation:slide 46s linear infinite}
.pmq .row.r{animation-direction:reverse;animation-duration:54s}
.pmq span{flex:none;padding:10px 20px;border-radius:40px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* pinned ritual story */
.rit-wrap{display:grid;gap:0}
.rit-stage{display:none}
.rit-step{padding:0 0 42px}
.rit-step .im{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.rit-step .im img{width:100%;height:100%;object-fit:cover}
.rit-step .no{font-family:var(--serif);font-size:15px;color:var(--gold)}
.rit-step h3{font-size:clamp(28px,6vw,46px);margin:6px 0 10px}
.rit-step p{color:var(--mute);max-width:440px}
.rit-step .more{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--burg);border-bottom:1.5px solid var(--gold)}
@media(min-width:900px){
  .rit-wrap{grid-template-columns:1.05fr 1fr;gap:80px;align-items:start}
  .rit-stage{display:block;position:sticky;top:104px;height:min(72vh,600px);border-radius:32px;overflow:hidden;background:var(--wine)}
  .rit-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
  .rit-stage img.on{opacity:1;transform:scale(1)}
  .rit-stage .prog{position:absolute;left:22px;right:22px;bottom:22px;height:3px;background:rgba(255,255,255,.3);border-radius:3px;overflow:hidden;z-index:3}
  .rit-stage .prog i{display:block;height:100%;width:0;background:var(--gold-l);transition:width .6s var(--ease)}
  .rit-stage .cnt{position:absolute;left:22px;top:20px;z-index:3;font-family:var(--serif);font-size:15px;color:#fff;background:rgba(74,16,38,.55);padding:5px 14px;border-radius:20px}
  .rit-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0;opacity:.28;transition:opacity .6s}
  .rit-step.on{opacity:1}
  .rit-step .im{display:none}
}

/* word-by-word reveal */
[data-words] .w{display:inline-block;opacity:.18;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--k)*45ms)}
[data-words].in .w{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-words] .w{opacity:1;transform:none}.pmq .row,.badge svg.ring{animation:none}}

/* subtle line texture on cream areas */
.band,.phead{background-color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%239C7A32' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M-10 40c30-30 60 30 90 0s60 30 100 0'/%3E%3Cpath d='M-10 90c30-30 60 30 90 0s60 30 100 0'/%3E%3Cpath d='M-10 140c30-30 60 30 90 0s60 30 100 0'/%3E%3C/svg%3E")}