/* Our story + Team sections (bottom of the one-page site). Loaded after mist.css; colours come from the mist tokens on body.mist */
.story{position:relative;overflow:hidden;color:var(--m-ink)}
.story-eyebrow{display:inline-block;margin-bottom:18px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--m-deeper)}

/* opening */
.story-hero{padding:clamp(56px,9vw,120px) 0 clamp(36px,6vw,76px)}
.story-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:5vw;align-items:center}
.story-hero h2{max-width:14ch;font-weight:500;font-size:clamp(38px,5.6vw,84px);line-height:1.02;letter-spacing:-.035em;color:var(--m-ink)}

/* a call that rings out: expanding rings around a phone */
.story-art{position:relative;width:min(100%,380px);aspect-ratio:1;margin-left:auto;display:grid;place-items:center}
.story-art i{position:absolute;inset:0;border:2px solid rgba(63,122,146,.6);border-radius:50%;opacity:.45;transform:scale(var(--r));animation:story-ring 5s ease-out infinite;animation-delay:var(--d)}
@keyframes story-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}}
.story-phone{position:relative;z-index:1;display:grid;place-items:center;width:34%;aspect-ratio:1;border-radius:50%;background:var(--m-ink);box-shadow:0 18px 44px rgba(47,59,70,.35)}
.story-phone svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%;animation:story-ringing 5s ease-in-out infinite}
@keyframes story-ringing{0%,24%,100%{transform:rotate(0)}3%{transform:rotate(-14deg)}6%{transform:rotate(12deg)}9%{transform:rotate(-12deg)}12%{transform:rotate(10deg)}15%{transform:rotate(-6deg)}18%{transform:rotate(0)}}
.story-badge{position:absolute;z-index:2;left:50%;bottom:6%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:30px;background:#fff;color:var(--m-slate);font-size:13.5px;font-weight:700;white-space:nowrap;box-shadow:0 10px 28px rgba(47,59,70,.18)}
.story-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m-amber)}

/* reading column */
.story-sec{padding:clamp(26px,4vw,52px) 0}
.story-col{max-width:700px}
.story-col p{margin:0 0 22px;font-size:clamp(18px,1.5vw,21px);line-height:1.75;color:var(--m-ink)}
.story-col p:last-child{margin-bottom:0}
.story-col p.story-lead{font-size:clamp(24px,2.7vw,36px);font-weight:500;line-height:1.25;letter-spacing:-.02em}
.story-col p.story-quote{margin:12px 0 30px;padding-left:clamp(18px,3vw,36px);border-left:4px solid #E8A95B;font-size:clamp(30px,4.4vw,60px);font-weight:300;line-height:1.08;letter-spacing:-.035em;color:var(--m-deep)}

/* the two mistakes */
.story-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0 30px}
.story-mini{padding:26px;border:1px solid rgba(47,59,70,.14);border-radius:24px;background:rgba(255,255,255,.88);box-shadow:0 14px 36px rgba(47,59,70,.08)}
.story-mini .si{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:50%;background:rgba(201,225,232,.7);color:var(--m-deep)}
.story-mini svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.story-col .story-mini b{display:block;margin-bottom:6px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.story-col .story-mini p{margin:0;font-size:17px;line-height:1.5;color:var(--m-slate)}

/* why Kartavya exists */
.story-why{margin:clamp(30px,5vw,60px) 0;padding:clamp(30px,6vw,76px);border-radius:36px;color:#fff;background:radial-gradient(80% 120% at 85% 0,rgba(127,175,194,.45),transparent 60%),linear-gradient(160deg,#3F7A92,#2F5568 70%,#2A3F4E);box-shadow:0 30px 70px rgba(47,85,104,.28)}
.story-why h3{max-width:16ch;font-weight:500;font-size:clamp(32px,4.6vw,64px);line-height:1.04;letter-spacing:-.035em;color:#fff}
.story-why p{max-width:620px;margin:22px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.65;color:rgba(255,255,255,.92)}
.story-pills{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0;padding:0;list-style:none}
.story-pills li{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid rgba(255,255,255,.3);border-radius:30px;background:rgba(255,255,255,.14);font-size:15px;font-weight:700}
.story-pills svg{width:18px;height:18px;fill:none;stroke:#C9E1E8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* closing */
.story-end{padding:clamp(20px,3vw,40px) 0 clamp(50px,7vw,90px);text-align:center}
.story-end p{max-width:680px;margin:0 auto;font-size:clamp(20px,2vw,26px);line-height:1.55;color:var(--m-ink)}

@media(max-width:900px){
  .story-hero-grid{grid-template-columns:1fr}
  .story-art{width:min(100%,280px);margin:6px auto 0}
}
@media(max-width:640px){
  .story-two{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .story-art i{animation:none}
  .story-phone svg{animation:none}
}

/* Team (last section of the page) */
.team{padding:clamp(60px,8vw,110px) 0 clamp(70px,9vw,120px);background:rgba(255,255,255,.55)}
.team-head{max-width:720px;margin:0 auto clamp(34px,5vw,56px);text-align:center}
.team-head h2{font-weight:500;font-size:clamp(32px,4.4vw,60px);line-height:1.05;letter-spacing:-.035em;color:var(--m-ink)}
.team-head p{margin-top:16px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--m-slate)}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.team-card{display:flex;flex-direction:column;padding:30px;border:1px solid rgba(47,59,70,.14);border-radius:28px;background:#fff;box-shadow:0 14px 36px rgba(47,59,70,.08)}
.team-av{display:grid;place-items:center;width:64px;height:64px;margin-bottom:20px;border-radius:50%;background:linear-gradient(160deg,#7FAFC2,#3F7A92);color:#fff;font-size:20px;font-weight:700;letter-spacing:.04em}
.team-card h3{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--m-ink)}
.team-role{margin-top:4px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--m-deep)}
.team-tag{align-self:flex-start;margin:16px 0 14px;padding:6px 14px;border-radius:20px;background:rgba(201,225,232,.7);color:var(--m-deeper);font-size:13.5px;font-weight:700}
.team-bio{font-size:17px;line-height:1.65;color:var(--m-slate)}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}}

/* contact block under the team */
.team-contact{margin-top:clamp(30px,4.5vw,52px);padding:clamp(28px,4vw,44px) 20px;border-radius:28px;text-align:center;color:#fff;background:radial-gradient(70% 140% at 85% 0,rgba(127,175,194,.4),transparent 60%),linear-gradient(160deg,#3F7A92,#2F5568)}
.tc-ic{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:50%;background:rgba(255,255,255,.16)}
.tc-ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.team-contact h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;color:#fff}
.team-contact a{display:inline-block;margin-top:10px;font-size:clamp(20px,2.6vw,32px);font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:6px;overflow-wrap:anywhere}
.team-contact a:hover{text-decoration-color:#fff}