/* A pulli kolam border: two interlaced threads around a row of dots, gathered by the emblem. */
.kolam-rule{position:relative;height:24px;max-width:880px;margin:0 auto 72px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23d9a24c' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 12C6 3 18 3 24 12S42 21 48 12'/%3E%3Cpath d='M0 12C6 21 18 21 24 12S42 3 48 12'/%3E%3C/g%3E%3Cg fill='%23a96930'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='36' cy='12' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center/48px 24px repeat-x;-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);}
.kolam-rule::after{content:'';position:absolute;left:50%;top:50%;width:64px;height:64px;translate:-50% -50%;border-radius:50%;background:url('assets/anantam-mark.99045036da9d.webp') center/48px no-repeat,var(--surface-0);}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){.kolam-rule{animation:kolam-draw linear both;animation-timeline:view();animation-range:entry 0% cover 35%;}}
}
@keyframes kolam-draw{from{clip-path:inset(0 50% 0 50%);}to{clip-path:inset(0 0 0 0);}}


/* EMBERBench: one card beside the slowly turning emblem. The card stays still; on hover
   brush strokes ink a Hoysala vimana over its pencil sketch, base to kalasha, then the
   kalasha lights. Motion language: --ease-out only, 450ms strokes, 150ms row stagger. */
body[data-page='company'] .research-contribution {
  position: relative;
  isolation: isolate;
  max-width: 1440px;
  margin-inline: auto;
  overflow-x: clip;
  padding: 40px 48px clamp(96px, 10vw, 150px);
}
body[data-page='company'] .research-contribution::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 120px;
  right: -260px;
  width: 620px;
  aspect-ratio: 1;
  background: url('assets/anantam-mark.99045036da9d.webp') center/contain no-repeat;
  opacity: .07;
  pointer-events: none;
  animation: sun-turn 300s linear infinite;
}
@keyframes sun-turn { to { rotate: 1turn; } }
.research-inner { max-width: 1264px; margin-inline: auto; }
.research-inner .kolam-rule { margin-bottom: 64px; }

.research-card {
  width: min(100%, 540px);
  padding: 30px 36px 32px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: 24px;
  background: linear-gradient(180deg, #fffaf2, #fdf6ec);
  box-shadow: 0 30px 70px -52px #573513b8, inset 0 1px #fffdf8;
  text-align: center;
  transition: border-color 450ms var(--ease-out);
}

/* The vimana: sandstone washes under a faint pencil sketch at rest. On hover (or, on phones,
   once the card scrolls into view) every stroke is inked in turn, plinth to kalasha, the
   stone warms, then the kalasha lights. */
.hoysala {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 22px;
  overflow: visible;
}
.hoysala .s1 { fill: #f8ebd5; }
.hoysala .s2 { fill: #efd7b2; }
.hoysala .s3 { fill: #ddb98a; }
.hoysala .s4 { fill: #b98a5c; }
.hoysala .sg { fill: #ead3b0; }
.hoysala .stone { fill: url(#hoysala-stone); }
.hoysala .gold { fill: #f1cf86; }
.hoysala-wash { opacity: .55; transition: opacity 450ms var(--ease-out); }
.hoysala-ghost path,
.hoysala-ink path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hoysala-ghost path { stroke: color-mix(in srgb, var(--copper) 34%, transparent); stroke-width: .8; }
.hoysala-ghost path.lite { stroke: #fff8ec; stroke-width: 1.3; }
.hoysala-ink path {
  stroke: var(--copper-deep);
  stroke-width: .95;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 450ms var(--ease-out), opacity 0s linear 450ms;
}
.hoysala-ink path.lite { stroke: #fbf1e0; stroke-width: 1.6; }
.hoysala-ink .t5 path { stroke: color-mix(in srgb, var(--gold) 70%, var(--copper-deep)); }
.hoysala-jewel { fill: var(--gold); opacity: 0; transition: opacity 450ms var(--ease-out); }
.hoysala-glow { opacity: 0; transition: opacity 450ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .research-card:hover { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
  .research-card:hover .hoysala-wash { opacity: 1; transition: opacity 1800ms var(--ease-out) 200ms; }
  .research-card:hover .hoysala-ink path {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset 450ms var(--ease-out) var(--d, 0ms), opacity 0s linear var(--d, 0ms);
  }
  .research-card:hover :is(.hoysala-jewel, .hoysala-glow) {
    opacity: 1;
    transition: opacity 450ms var(--ease-out) 2400ms;
  }
}
/* Phones: index.js arms the card, then inks it once when it scrolls into view. */
.research-card.is-armed:not(.is-drawn) :is(.hoysala-wash, .hoysala-ink path, .hoysala-jewel, .hoysala-glow) {
  transition: none;
}
.research-card.is-drawn { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.research-card.is-drawn .hoysala-wash { opacity: 1; transition: opacity 1800ms var(--ease-out) 200ms; }
.research-card.is-drawn .hoysala-ink path {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 450ms var(--ease-out) var(--d, 0ms), opacity 0s linear var(--d, 0ms);
}
.research-card.is-drawn :is(.hoysala-jewel, .hoysala-glow) {
  opacity: 1;
  transition: opacity 450ms var(--ease-out) 2400ms;
}
/* Touch without the script, and reduced motion: the vimana is simply complete and lit. */
@media (hover: none), (pointer: coarse) {
  .research-card:not(.is-armed) :is(.hoysala-wash, .hoysala-ink path, .hoysala-jewel, .hoysala-glow) {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page='company'] .research-contribution::before { animation: none; }
  .research-card :is(.hoysala-wash, .hoysala-ink path, .hoysala-jewel, .hoysala-glow) {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: none;
  }
}

/* Type: tracked eyebrow between gold rules, a display title, a centred lede. */
.research-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--copper-deep);
  font: 600 .75rem/1.3 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.research-eyebrow::before,
.research-eyebrow::after {
  content: '';
  flex: 1;
  min-width: 18px;
  height: 7px;
  background:
    linear-gradient(45deg, transparent 2.5px, var(--gold) 2.5px 3.5px, transparent 3.5px) right center / 7px 7px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left center / calc(100% - 10px) 1px no-repeat;
  opacity: .8;
}
.research-eyebrow::after { scale: -1 1; }
.research-card h2 {
  margin: 12px 0 14px;
  color: var(--earth);
  font: 400 clamp(3rem, 5vw, 4.25rem)/1 var(--font-display);
  letter-spacing: -.02em;
}
.research-card .contribution-description {
  max-width: 30ch;
  margin: 0 auto;
  color: var(--text-primary);
  font-size: 1.1875rem;
  line-height: 1.42;
  text-wrap: balance;
}
.research-lotus {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 320px);
  margin: 20px auto;
  color: var(--gold);
}
.research-lotus::before,
.research-lotus::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.research-lotus::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.research-lotus svg {
  width: 32px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.research-card .contribution-detail {
  margin: 0;
  color: var(--text-secondary);
  font-size: .9375rem;
  line-height: 1.65;
  text-align: left;
  text-wrap: pretty;
}

@media (max-width: 1100px) { body[data-page='company'] .research-contribution { padding-inline: 32px; } }
@media (max-width: 700px) {
  body[data-page='company'] .research-contribution { padding: 28px 20px 56px; }
  body[data-page='company'] .research-contribution::before { width: 360px; right: -170px; top: 180px; }
  .research-inner .kolam-rule { margin-bottom: 44px; }
  .research-card { padding: 22px 20px 24px; }
  .hoysala-ink path { stroke-width: .7; }
  .research-eyebrow { gap: 8px; font-size: .75rem; letter-spacing: .14em; white-space: nowrap; }
  .hoysala-ghost path { stroke-width: .6; }
  .hoysala-ink path.lite { stroke-width: 1.1; }
  .research-card .contribution-description { font-size: 1.0625rem; }
}
@media (max-width: 380px) {
  .research-eyebrow { justify-content: center; white-space: normal; }
  .research-eyebrow::before,
  .research-eyebrow::after { display: none; }
}

/* Founders: two cards, each framed only by the outline of a Hampi arch. */
.founders{position:relative;max-width:1440px;margin:0 auto;padding:16px 48px;}
.founders-heading{max-width:1264px;margin:0 auto 56px;display:grid;justify-items:center;text-align:center;}
.founders-script{display:flex;align-items:center;gap:14px;margin:0 0 12px;font-family:var(--font-devanagari);font-size:19px;line-height:1.3;color:var(--copper-deep);}
.founders-script::before,.founders-script::after{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.founders-script::after{background:linear-gradient(270deg,transparent,var(--gold));}
.founders-heading h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,5vw,4.5rem);line-height:1;letter-spacing:-.025em;color:var(--text-primary);}
.founders-heading>p:last-child{margin:16px 0 0;font-family:var(--font-display);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.3;color:var(--text-secondary);}
.founder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);max-width:1080px;margin:0 auto;align-items:stretch;}
/* Only the outline of a cusped Hampi arch, like the arches of the Lotus Mahal. The arch is sized in cqi
   of its layer, so the curve keeps its shape at any card width; the two sides continue it to the floor. */
.founder-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(27% + 22px) clamp(26px,4vw,52px) 44px;}
/* Keep founder content above the footer while letting the wave cover the arches. */
.founder-card > :not(.founder-arch){z-index:1;}
.founder-arch{position:absolute;inset:0;container-type:inline-size;pointer-events:none;color:color-mix(in srgb,var(--gold) 80%,var(--copper));transition:color var(--duration-quick) var(--ease-out);}
.founder-arch svg{position:absolute;inset:0 0 auto;width:100%;height:auto;overflow:visible;}
.founder-arch path{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;}
.arch-side{position:absolute;top:57.5cqi;bottom:0;width:.275cqi;background:linear-gradient(currentColor,transparent 78%);}
.arch-side.is-left{left:-.1375cqi;}
.arch-side.is-right{right:-.1375cqi;}
.founder-initial{position:absolute;top:15cqi;left:50%;translate:-50% -50%;font-family:var(--font-devanagari);font-size:clamp(1.5rem,5.4cqi,2rem);line-height:1;color:var(--copper-deep);}
@media(hover:hover) and (pointer:fine){.founder-card:hover .founder-arch{color:var(--copper-deep);}}
/* The outline draws itself once as the card scrolls in. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .founder-arch path{stroke-dasharray:1;animation:arch-draw linear both;animation-timeline:view();animation-range:entry 0% cover 40%;}
  .arch-side{transform-origin:top;animation:arch-side linear both;animation-timeline:view();animation-range:entry 10% cover 45%;}
 }
}
@keyframes arch-draw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes arch-side{from{scale:1 0;}to{scale:1 1;}}
.founder-card h3{margin:0;font-family:var(--font-display);font-size:clamp(2.25rem,3.2vw,2.75rem);font-weight:400;line-height:1.05;letter-spacing:-.01em;color:var(--text-primary);}
/* Each founder: a name and one verse, in Sanskrit and English, with its source. */
.founder-quote{margin:22px 0 0;max-width:34ch;}
.founder-quote blockquote{margin:0;}
.founder-verse{margin:0;font-family:var(--font-devanagari);font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.5;color:var(--copper-deep);text-wrap:balance;}
.founder-translation{margin:14px 0 0;font-family:var(--font-display);font-size:clamp(1.25rem,1.6vw,1.4375rem);line-height:1.35;color:var(--text-primary);text-wrap:balance;}
.founder-quote figcaption{margin-top:12px;font-size:.875rem;color:var(--text-secondary);}
.founder-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;padding:20px 0 0;list-style:none;}
.founder-links li{display:flex;align-items:center;}
.founder-links li+li::before{content:'';width:4px;height:4px;rotate:45deg;background:var(--gold);}
.founder-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:.9375rem;font-weight:500;color:var(--link);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--duration-quick) var(--ease-out);}
.founder-links a:hover{text-decoration-color:currentColor;}
.founder-links a:active{scale:.97;}
@media(max-width:860px){
 .founders{padding:8px 20px 12px;}
 .founders-heading{margin-bottom:40px;}
 .founder-grid{grid-template-columns:minmax(0,1fr);max-width:520px;row-gap:48px;}
 .founder-links a{padding:0 9px;font-size:.875rem;}
}

/* The lab's first film, after the founders: same heading pattern, one poster. */
body[data-page='company'] .lab-film-section {
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(72px, 9vw, 128px) 48px clamp(96px, 10vw, 150px);
}
.lab-film-section .lab-film { width: min(100%, 680px); margin-inline: auto; }
@media (max-width: 700px) {
  body[data-page='company'] .lab-film-section { padding: 64px 20px 72px; }
}