/* WisdomTec organic edges, shared across pages (working copy).
   Cards: soft edge (option 1). Pills and chips: hand-cut edge (option 2). */

.card{
  border-radius:30px 34px 28px 32px / 28px 30px 34px 26px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

.step{
  border-radius:26px 30px 24px 28px / 24px 28px 30px 22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

.pill{border-radius:14px 22px 12px 20px}
.pill.done,.pill.now,.pill.next{border-radius:14px 22px 12px 20px}

.chip{
  border-radius:18px 28px 14px 24px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}

@media (prefers-reduced-motion:reduce){
  .card:hover,.step:hover,.chip:hover{transform:none}
}

/* Safeguards: four cards as a 2x2 grid on desktop and tablet, one column on phone. */
.safeguards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.safeguards-grid{grid-template-columns:1fr}}

/* Subtle painted underline under the italic accent in headings, as on the homepage. Static, no animation. */
.display .accent,.title .accent,.title-sm .accent,h1 .accent,h2 .accent,h3 .accent{
  position:relative;display:inline-block;white-space:nowrap;isolation:isolate;
}
.display .accent::after,.title .accent::after,.title-sm .accent::after,h1 .accent::after,h2 .accent::after,h3 .accent::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.3em;opacity:.38;
  background:url("../img/brush/underline-1.svg") 0 0/100% 100% no-repeat;z-index:-1;pointer-events:none;
}
@media (max-width:480px){
  .display .accent,.title .accent,.title-sm .accent,h1 .accent,h2 .accent,h3 .accent{font-size:.92em}
}

/* Team cards and research stat tiles: soft edge and the same subtle hover as the other cards. */
.person,.stat{
  border-radius:30px 34px 28px 32px / 28px 30px 34px 26px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.person:hover,.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}


@media (prefers-reduced-motion:reduce){
  .person:hover,.stat:hover{transform:none}
}

/* Underline paints in as the heading scrolls into view (same timing as the homepage). */
.js-ul .display .accent::after,.js-ul .title .accent::after,.js-ul .title-sm .accent::after,.js-ul h1 .accent::after,.js-ul h2 .accent::after,.js-ul h3 .accent::after{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 3.2s cubic-bezier(.3,.1,.2,1);
}
.js-ul .accent.is-in::after{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .js-ul .accent::after{clip-path:none;transition:none}
}

/* Conversation box and notes: soft edge, to match the cards. */
.convo,.status-note{border-radius:30px 34px 28px 32px / 28px 30px 34px 26px}

/* Progress line down the right margin (desktop only), as on the homepage. */
.kh-thread{position:fixed;top:0;right:clamp(4px,1.2vw,18px);width:56px;height:100vh;pointer-events:none;z-index:0;overflow:visible}
.kh-thread path{fill:none;stroke:var(--color-sage-deep);stroke-width:1.4;stroke-linecap:round;opacity:.5}
.kh-thread-dot{fill:var(--color-coral);opacity:.9}
@media (max-width:1024px){.kh-thread{display:none}}

/* Gentle fade and rise on scroll (as on the homepage). Hover lift still works once a card has appeared. */
.js-motion .reveal{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js-motion .reveal.is-in{opacity:1;transform:none}
.js-motion .reveal.is-in.card:hover,.js-motion .reveal.is-in.step:hover,.js-motion .reveal.is-in.person:hover,.js-motion .reveal.is-in.stat:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  .js-motion .reveal{opacity:1;transform:none;transition:none}
}

/* All section and page labels: larger, same label style, so they sit clearly above the headings */
.eyebrow{font-size:clamp(16px,1.6vw,20px);letter-spacing:.16em;margin-bottom:20px;gap:14px}
.eyebrow::before{width:58px;height:16px}
@media (max-width:640px){.eyebrow{font-size:16px;margin-bottom:14px}.eyebrow::before{width:44px;height:14px}}

/* Opening frame: cairn (three stones above the purpose statement) and the next-frame arrow */
.hero{position:relative}
.page-hero{position:relative}
.cairn-col{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.6vw,8px)}
.cairn{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.8vw,10px);width:min(360px,100%)}
.cairn-stone{display:flex;align-items:center;justify-content:center;font-family:var(--font-headline);font-style:italic;font-size:clamp(17px,1.5vw,20px);line-height:1;color:var(--text-primary);text-align:center;border-radius:46% 54% 42% 58% / 58% 46% 54% 42%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.04)}
.cairn-wisdom{width:46%;height:clamp(50px,4.6vw,60px);background:#efdcb0}
.cairn-compassion{width:62%;height:clamp(56px,5.2vw,68px);background:#e8c9bd;border-radius:54% 46% 58% 42% / 44% 56% 44% 56%}
.cairn-awareness{width:82%;height:clamp(62px,6vw,76px);background:#d6e4d2;border-radius:42% 58% 50% 50% / 56% 44% 56% 44%}
.cairn-dot{position:absolute;left:50%;bottom:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--color-coral);opacity:0;z-index:2;pointer-events:none}
.js-motion .cairn-dot{animation:cairn-dot-rise 2.8s ease .2s 1 both}
.js-motion .cairn-awareness{animation:cairn-settle .7s ease .9s both}
.js-motion .cairn-compassion{animation:cairn-settle .7s ease 1.5s both}
.js-motion .cairn-wisdom{animation:cairn-settle .7s ease 2.1s both}
@keyframes cairn-dot-rise{0%{opacity:0;transform:translateY(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(-240px)}}
@keyframes cairn-settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-next{position:absolute;right:clamp(8px,1vw,16px);bottom:clamp(10px,1.6vh,18px);width:clamp(64px,5.6vw,78px);height:clamp(64px,5.6vw,78px);min-height:0;padding:0;justify-content:center;transition:transform .25s var(--ease,ease)}
.hero-next:hover{transform:translateY(2px)}
.hero-next svg{position:relative;display:block;width:30%;height:auto;overflow:visible}
.hero-next .hn-arrow{transform-box:fill-box;transform-origin:50% 50%;animation:hn-bob 2.8s ease-in-out infinite}
@keyframes hn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.hero-next .hn-arrow{animation:none}}
@media (prefers-reduced-motion:reduce){.cairn-dot{display:none}.js-motion .cairn-stone{animation:none;opacity:1}}

/* Fit frames to a laptop screen: less vertical padding, scaled to the window height */
section{padding-block:clamp(48px,6.4vh,76px)}
.hero{padding-block:clamp(28px,4.2vh,52px) clamp(40px,5.6vh,64px)}
.page-hero{padding-block:clamp(28px,4.2vh,52px) clamp(32px,4.4vh,56px)}
.hero .display{font-size:clamp(40px,min(5.2vw,8.4vh),72px)}
.page-hero .display{font-size:clamp(40px,min(5.4vw,8.6vh),74px)}
.mission{min-height:clamp(250px,30vh,340px)}
.hero .lead{margin-top:18px}
.hero .support{margin-top:10px}
.page-hero.has-cards{padding-bottom:clamp(104px,12vh,128px)}

/* Homepage Kindful section: wider frame, text and film top-aligned, film grows with the window height */
#kindful > .container{max-width:min(1440px,100%)}
#kindful .split{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(40px,5vw,104px)}
#kindful .film{max-width:none;align-self:start;padding-top:clamp(0px,2vh,24px)}
#kindful .film video{width:min(480px,calc((100vh - 230px) * 9 / 16))}

/* Homepage Kindful: the Today / Being studied / Long-term row runs full width under the text and video */
#kindful .kindful-status{margin-top:clamp(20px,3.6vh,44px)}
#kindful .kindful-status .status{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px)}
@media (max-width:900px){#kindful .kindful-status .status{grid-template-columns:1fr}}

/* Research opening frame: the collaboration invitation sits in a panel on the right, so the frame is balanced at laptop size */
.research-hero > .container.split{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(40px,5vw,96px);align-items:center}
.hero-invite{padding:clamp(28px,3.6vw,48px) clamp(28px,3.4vw,46px);border-radius:44px 36px 48px 32px / 36px 46px 32px 42px;background:rgba(226,238,222,.5);border:1px solid rgba(57,88,74,.14)}
.hero-invite .title{font-size:clamp(26px,2.5vw,36px);margin-top:4px}
.hero-invite .actions{margin-top:26px}
@media (max-width:900px){.research-hero > .container.split{grid-template-columns:1fr}}

/* Phones: the Kindful section stacks text, video and status row in one column */
@media (max-width:900px){
  #kindful .split{grid-template-columns:1fr;gap:36px}
  #kindful .film{padding-top:0}
  #kindful .film video{width:min(360px,100%)}
}

/* Phones: leave room under the opening frame so the next-section arrow sits below the content */
@media (max-width:640px){
  .page-hero,.hero{padding-bottom:104px}
  .hero-next{width:56px;height:56px;right:12px;bottom:14px}
}

/* Phones: the research invitation panel is centred with side room, not edge to edge */
@media (max-width:900px){
  .hero-invite{width:100%;max-width:520px;margin:0 auto;padding:26px 24px}
}

/* Phones: the invitation button wraps inside the panel, so the panel stays inside the screen */
@media (max-width:900px){
  .hero-invite{min-width:0;box-sizing:border-box}
  .hero-invite .actions .stone{white-space:normal;text-align:center;height:auto;min-height:52px;padding:14px 22px;line-height:1.3}
}

/* Phone menu icon drawn in CSS, so it shows even when the page is opened from disk */
.menu-btn .ico{-webkit-mask:none;mask:none;background:none;position:relative;width:22px;height:14px;box-sizing:border-box;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-btn .ico::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor;transform:translateY(-1px)}

/* "What we believe" statement: centred, with the italic line wrapping inside the column */
.statement .container.narrow{text-align:center}
.statement .eyebrow{justify-content:center}
.statement .title{margin-inline:auto;max-width:11.5em;text-wrap:balance}

/* Research timeline: "explore a collaboration" links sit under the relevant frames */
.tl-collab{margin-top:14px}

/* Homepage research intro: heading and text centred above the three frames */
.research-intro{display:block;text-align:center}
.research-intro .eyebrow{justify-content:center}
.research-intro .title{margin-inline:auto;max-width:16em}
.research-intro .prose{max-width:38em;margin:22px auto 0}
.research-intro .prose p{margin-inline:auto}
@media (max-width:640px){.research-intro .title{font-size:clamp(28px,8vw,36px)}}

/* Why WisdomTec exists: clearer gap between the label, headings and paragraphs; the second block sits a set distance below the first */
.why-block .eyebrow{margin-bottom:22px}
.why-block .prose p + p{margin-top:16px}
.why-second{margin-top:clamp(48px,6vw,84px)}