/* Ashtadeep: a corporate home in light. Inset art hero, a finder, overlapping cards, stories, app cards with art,
   promises, the name, and a full footer. Tokens and rules live in DESIGN.md; change a value there first. */

@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo2-devanagari.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
  --white: #FFFFFF;
  --mist: #F1F2F7;          /* stories band, footer */
  --mist-deep: #E3E5EE;
  --cream: #FFF9EF;         /* Warm Ivory: the name, the promises */
  --ink: #10182A;           /* Midnight: text */
  --ink-2: #3F4A63;         /* secondary text, 8.9:1 on white */
  --ink-3: #4F5873;         /* small print, 6.6:1 on mist */
  --line: #D5D8E4;
  --chip: #10182A;          /* tags */
  --saffron: #E8770F;       /* Amber, deepened to stay readable as text (3.0:1 large) */
  --ember: #F05A28;         /* Living Orange */
  --amber: #FFB000;         /* Amber: art and marks only, never text */
  --turquoise: #20BFC4;     /* Turquoise: art and marks */
  --turquoise-ink: #0B7F84; /* turquoise for links and focus, 4.8:1 */
  --brass: #C9952F;
  --brass-ink: #8A5A0B;

  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-deva: "Baloo 2", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --gutter: 20px;
  --max: 1200px;
  --frame: 10px;            /* the hero's inset */
  --radius: 24px;
  --card-radius: 14px;
  --shadow: 0 1px 2px rgb(20 27 51 / .05), 0 14px 34px -14px rgb(20 27 51 / .22);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 36px; --frame: 12px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--turquoise-ink); outline-offset: 3px; border-radius: 8px; }
::selection { background: #FFE2B8; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 980px; text-decoration: none; }
.skip:focus { top: 8px; }
.deva { font-family: var(--font-deva); font-weight: 600; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.underline { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgb(20 27 51 / .35); font-weight: 500; transition: text-decoration-color 160ms ease; }
.underline:hover { text-decoration-color: var(--turquoise-ink); }
.underline.arrow::after { content: " \2197"; font-size: .85em; }
.tag { display: inline-block; align-self: flex-start; padding: 3px 9px; border-radius: 6px; background: var(--chip); color: #fff; font: 600 .75rem/1.4 var(--font); letter-spacing: .02em; }

/* Header: floats over the hero, then settles on white */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: calc(var(--frame) + 14px) calc(var(--frame) + 18px) 0; transition: background-color 250ms ease, padding 250ms ease, box-shadow 250ms ease; }
.site-header.is-scrolled { background: rgb(255 255 255 / .9); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 rgb(20 27 51 / .08); }
.bar { display: flex; align-items: center; gap: 14px; }
.round { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px -6px rgb(20 27 51 / .35); list-style: none; }
.round::-webkit-details-marker { display: none; }
.round svg { width: 20px; height: 20px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font: 700 1.375rem/1 var(--font); letter-spacing: -.02em; }
.brand svg { width: 32px; height: 32px; margin-top: -6px; }
.brand .deva { font-size: 1rem; color: var(--ink-2); }
.pills { margin: 0 auto; display: flex; gap: 4px; padding: 5px; border-radius: 980px; background: rgb(255 255 255 / .62); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
.pills a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 980px; text-decoration: none; font: 500 .9375rem/1 var(--font); transition: background-color 160ms ease; }
.pills a:hover { background: rgb(255 255 255 / .85); }
.region { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 980px; background: var(--ink); color: #fff; text-decoration: none; font: 500 .9375rem/1 var(--font); box-shadow: 0 6px 18px -8px rgb(20 27 51 / .6); transition: transform 160ms var(--ease-out); }
.region:active { transform: scale(.97); }
.region svg { width: 16px; height: 16px; }
@media (max-width: 899px) { .pills { display: none; } }
@media (max-width: 520px) { .region span { display: none; } .region { padding: 0 14px; } .brand { font-size: 1.1875rem; } }

/* The menu sheet, from the round button */
.menu-sheet { position: fixed; left: var(--frame); right: var(--frame); top: var(--frame); max-height: calc(100svh - 2 * var(--frame)); overflow: auto; z-index: 60; background: #fff; border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgb(20 27 51 / .45); padding: 22px clamp(20px, 4vw, 48px) 36px; transform-origin: top left; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style { .menu[open] .menu-sheet { opacity: 0; transform: scale(.98) translateY(-6px); } }
.menu-sheet .top { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.menu-sheet .grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .menu-sheet .grid { grid-template-columns: repeat(3, 1fr); } }
.menu-sheet h2 { margin: 0 0 10px; font: 600 .8125rem/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.menu-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-sheet li a { display: inline-flex; align-items: center; min-height: 44px; font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.2 var(--font); letter-spacing: -.02em; text-decoration: none; }
.menu-sheet li a:hover { color: var(--turquoise-ink); }

/* Hero: art in an inset frame, a headline, the finder, and four cards over its foot */
.hero { position: relative; margin: var(--frame); border-radius: var(--radius); overflow: hidden; min-height: min(100svh - 2 * var(--frame), 980px); background: #F7EDE2; display: flex; flex-direction: column; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 250 244 / .25) 0%, rgb(255 250 244 / .55) 40%, rgb(255 250 244 / .2) 100%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(120px, 14vh, 170px) var(--gutter) 0; }
.hero h1 { margin: 0; font: 600 clamp(2.75rem, 1.2rem + 6vw, 6rem)/1.04 var(--font); letter-spacing: -.035em; text-wrap: balance; max-width: 16ch; }
.hero h1 .glow { background: linear-gradient(100deg, var(--saffron), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin: 18px 0 0; max-width: 40ch; font: 500 clamp(1.0625rem, 1rem + .4vw, 1.25rem)/1.45 var(--font); color: var(--ink-2); }

.finder { position: relative; z-index: 2; width: min(100%, 720px); margin-top: clamp(26px, 4vh, 40px); text-align: left; background: rgb(255 255 255 / .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 18px; box-shadow: var(--shadow); padding: 14px; }
.finder label { display: block; }
.finder input { width: 100%; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px 0 46px; font: 400 1.0625rem var(--font); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5170' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px 50% / 20px; }
.finder input:focus { outline: 2px solid var(--turquoise-ink); outline-offset: 1px; border-color: transparent; }
.finder .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.finder .chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: 500 .875rem/1 var(--font); text-decoration: none; background: #fff; transition: border-color 160ms ease, background-color 160ms ease; }
.finder .chips a:hover { border-color: var(--turquoise-ink); background: #F0FBFB; }
.finder .results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.finder .results:empty { display: none; }
.finder .results a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.finder .results a:hover, .finder .results a:focus-visible { background: var(--mist); }
.finder .results b { display: block; font-weight: 600; }
.finder .results span { color: var(--ink-2); font-size: .9375rem; }
.finder .none { margin: 10px 4px 0; color: var(--ink-2); font-size: .9375rem; }

.hero-cards { position: relative; z-index: 1; display: grid; gap: 14px; width: min(100% - 2 * var(--gutter), var(--max)); margin: clamp(36px, 6vh, 64px) auto var(--gutter); }
@media (min-width: 700px) { .hero-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hero-cards { grid-template-columns: repeat(4, 1fr); } }
.hero-card { background: #fff; border-radius: var(--card-radius); padding: 18px 20px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-height: 172px; text-decoration: none; transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(20 27 51 / .05), 0 22px 44px -16px rgb(20 27 51 / .3); } }
.hero-card .icon { width: 38px; height: 38px; border-radius: 10px; background: var(--mist); display: grid; place-items: center; }
.hero-card .icon svg, .hero-card .icon img { width: 26px; height: 26px; object-fit: contain; }
.hero-card h2 { margin: 4px 0 0; font: 500 clamp(1.25rem, 1.1rem + .4vw, 1.5rem)/1.2 var(--font); letter-spacing: -.02em; }
.hero-card .underline { margin-top: auto; align-self: flex-start; font-size: .9375rem; }

/* Section heads */
.head { text-align: center; max-width: 46rem; margin: 0 auto; }
.head h2 { margin: 0; font: 600 clamp(2rem, 1.2rem + 3vw, 3.25rem)/1.12 var(--font); letter-spacing: -.025em; text-wrap: balance; }
.head h2 em { font-style: normal; background: linear-gradient(100deg, var(--saffron), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.head p { margin: 14px auto 0; max-width: 54ch; color: var(--ink-2); }
.section { padding: clamp(72px, 8vw, 120px) 0; }

/* Top stories: a band of large cards, paged */
.stories { background: var(--mist); padding: clamp(56px, 6vw, 88px) 0; }
.stories .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.stories .row h2 { margin: 0; font: 600 1rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.pager { display: flex; align-items: center; gap: 12px; font: 500 .9375rem/1 var(--font); }
.pager b { font-weight: 700; }
.pager button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color 160ms ease, opacity 160ms ease, transform 160ms var(--ease-out); }
.pager button:hover { background: var(--mist-deep); }
.pager button:active { transform: scale(.94); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager svg { width: 18px; height: 18px; }
.track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track > ul { list-style: none; margin: 0; padding: 0 0 20px; display: flex; gap: 20px; }
.story { scroll-snap-align: start; flex: 0 0 min(100%, 860px); display: grid; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 760px) { .story { grid-template-columns: 1fr 1.1fr; min-height: 320px; } }
.story img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.story .text { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.story h3 { margin: 4px 0 0; font: 500 clamp(1.375rem, 1.2rem + .6vw, 1.75rem)/1.2 var(--font); letter-spacing: -.02em; }
.story p { margin: 0; color: var(--ink-2); }
.story .underline { margin-top: auto; align-self: flex-start; }

/* Our apps: art with a white card over its foot */
.apps .cards { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 64px); align-items: start; }
@media (min-width: 820px) { .apps .cards { grid-template-columns: repeat(3, 1fr); } .apps .cards > :nth-child(3n + 2) { margin-top: -28px; } }
.app { position: relative; display: block; text-decoration: none; }
.app .art { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3.1; background: var(--tone, var(--mist)); display: grid; place-items: center; }
.app .art img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.app.fit-contain .art img { width: 62%; height: 78%; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .app:hover .art img { transform: scale(1.04); } }
.app .card { position: relative; margin: -56px 18px 0; background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.app h3 { margin: 0; font: 500 clamp(1.375rem, 1.2rem + .5vw, 1.625rem)/1.2 var(--font); letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.app h3 small { font: 500 .8125rem var(--font); color: var(--ink-2); }
.app p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.app .status { display: inline-flex; align-items: center; gap: 6px; font: 600 .875rem/1.3 var(--font); color: var(--ink); }
.app .status svg { width: 18px; height: 18px; margin-top: -3px; }
.app .status.development svg .flame, .app .status.soon svg .flame { opacity: 0; }
.app .meta { font-size: .875rem; color: var(--ink-2); }

/* What we work on: a grid of underlined links */
.work { background: var(--mist); }
.links { list-style: none; margin: clamp(36px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: 22px 28px; }
@media (min-width: 560px) { .links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .links { grid-template-columns: repeat(4, 1fr); } }
.links a { font-size: 1.125rem; }

/* Promises: cream band, a gallery of large cards */
.promises { background: var(--cream); overflow: hidden; }
.promises .row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.promises .head { text-align: left; margin: 0; }
.promises .head p { margin-left: 0; }
.gallery { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; --inset: max(var(--gutter), (100% - var(--max)) / 2); scroll-padding-inline: var(--inset); }
.gallery::-webkit-scrollbar { display: none; }
.gallery > ul { list-style: none; margin: 0; padding: 0 var(--inset) 24px; display: flex; gap: 18px; width: max-content; }
.promise { scroll-snap-align: start; width: min(78vw, 330px); min-height: 400px; background: #fff; border-radius: 20px; padding: 28px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.promise .lamp-mini { width: 84px; margin-bottom: 52px; }
.promise .lamp-mini svg { width: 100%; height: auto; overflow: visible; }
.promise .flame { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; transform: scale(.6); transition: opacity 600ms ease, transform 600ms var(--ease-out); }
.promise.on .flame { opacity: 1; transform: none; animation: flicker var(--d, 2.2s) ease-in-out 700ms infinite; }
.promise .num { font: 600 .875rem/1 var(--font); color: var(--ink-3); letter-spacing: .02em; }
.promise .num.deva { font-size: 1.125rem; font-family: var(--font-deva); }
.promise h3 { margin: 10px 0 0; font: 500 1.5rem/1.15 var(--font); letter-spacing: -.025em; }
.promise p { margin: 10px 0 0; color: var(--ink-2); font-size: 1rem; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1); }
  13% { transform: scale(.99, 1.025) rotate(-.8deg); }
  31% { transform: scale(1.012, .985) rotate(.5deg); }
  52% { transform: scale(.995, 1.018) rotate(-.3deg); }
  68% { transform: scale(1.008, .99) rotate(.7deg); }
  86% { transform: scale(.992, 1.012) rotate(-.4deg); }
}

/* The name: the chapter the owner chose */
.name { text-align: center; background: linear-gradient(180deg, var(--cream), #FFFFFF); }
.name .lockup { width: min(100%, 640px); height: auto; margin: 0 auto; }
.name .split { margin: 6px 0 0; color: var(--ink-2); font-size: 1.125rem; }
.name .copy { margin: 26px auto 0; max-width: 36ch; font: 500 clamp(1.1875rem, 1rem + .6vw, 1.5rem)/1.4 var(--font); letter-spacing: -.015em; }
.name blockquote { margin: 34px 0 0; }
.name blockquote p { margin: 0; font: 600 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.3 var(--font-deva); color: var(--brass-ink); }
.name blockquote footer { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }

/* Footer: columns of links on mist */
.site-footer { background: var(--mist); padding: 56px 0 26px; font-size: .9375rem; }
.foot-cols { display: grid; gap: 30px; padding-bottom: 36px; }
@media (min-width: 700px) { .foot-cols { grid-template-columns: repeat(4, 1fr); } }
.foot-cols h2 { margin: 0 0 14px; font: 500 1.0625rem/1.2 var(--font); color: var(--ink-2); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot-cols a { display: inline-flex; align-items: center; min-height: 36px; }
@media (pointer: coarse) { .foot-cols a { min-height: 44px; } }
.foot-cols p { margin: 0; color: var(--ink-2); font-size: .875rem; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; color: var(--ink-3); font-size: .875rem; }
.foot-bottom .brand { font-size: 1.125rem; color: var(--ink); }
.foot-bottom .brand svg { width: 26px; height: 26px; }
.where { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 8px; background: var(--mist-deep); text-decoration: none; color: var(--ink); font-weight: 500; }
.where svg { width: 16px; height: 16px; }

/* Reveal: visible by default; the classes only apply once the script runs */
.js.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.js.motion .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; transform: none; }
  .promise .flame { transition: opacity 300ms ease; transform: none; animation: none !important; }
}

/* 404 */
.lost { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 140px var(--gutter) 80px; background: var(--cream); }
.lost svg { width: 104px; margin: 0 auto 14px; }
.lost h1 { margin: 0; font: 400 clamp(2.5rem, 1.6rem + 3vw, 4rem)/1.05 var(--font); letter-spacing: -.04em; }
.lost p { color: var(--ink-2); margin: 14px 0 26px; }

@media (prefers-reduced-transparency: reduce) { .pills, .finder, .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } }
@media (prefers-contrast: more) { :root { --ink-2: #2E3450; --ink-3: #3A4060; --line: #8E93A8; } .hero h1 .glow, .head h2 em { background: none; color: #A33A00; } }

/* The finder's box needs the script; without it, its suggestions still work as links */
html:not(.js) .finder input { display: none; }
html:not(.js) .finder .chips { margin-top: 0; }

/* Brand marks (the owner's lockups and emblem, brand/source) */
.brand img { height: 36px; width: auto; }
.site-header .brand img { height: 52px; }
@media (max-width: 520px) { .site-header .brand img { height: 40px; } }
.foot-bottom .brand img { height: 40px; }
.menu-sheet .brand img { height: 48px; }
.hero .hi-tagline { margin: 10px 0 0; font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--font-deva); color: var(--ink-2); }
.name .tagline-hi { margin: 8px 0 0; font: 600 1.25rem/1.4 var(--font-deva); color: var(--ink-2); }
.hero-card .icon:has(.emblem), .hero-card .icon.dark { background: #10182A; }
.hero-card .icon img.emblem { width: 30px; height: 30px; }
/* A promise's lamp: the one-colour emblem, lit to full colour when its card comes into view */
.promise .lamp-mini { position: relative; width: 96px; height: 70px; margin-bottom: 52px; }
.promise .lamp-mini img { position: absolute; left: 0; bottom: 0; width: 96px; height: auto; transition: opacity 700ms ease, filter 700ms ease; }
.promise .lamp-mini .lit { opacity: 0; filter: drop-shadow(0 6px 14px rgb(240 90 40 / .35)); }
.promise.on .lamp-mini .lit { opacity: 1; }
.promise.on .lamp-mini .unlit { opacity: 0; }
.lost .emblem { width: 120px; margin: 0 auto 14px; }
.app .status img { width: 24px; height: auto; margin-top: -2px; }
button, input { font: inherit; }

/* Vyom, the mascot: beside the hero's search on wide screens, with a speech bubble; and his own section. */
.mascot { display: none; }
@media (min-width: 1100px) {
  .mascot { display: block; position: absolute; z-index: 2; right: max(var(--gutter), calc(50% - 640px)); top: 322px; width: 168px; aspect-ratio: 186 / 340; pointer-events: none; }
  .mascot .vyom { filter: drop-shadow(0 18px 24px rgb(20 27 51 / .22)); }
  .mascot.waiting .bubble { opacity: 0; }
  .mascot .bubble { position: absolute; right: 0; bottom: calc(100% + 10px); width: 210px; margin: 0; padding: 12px 14px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); font: 500 .9375rem/1.35 var(--font); color: var(--ink); text-align: left; transition: opacity 260ms var(--ease-out); }
  .mascot .bubble::after { content: ""; position: absolute; right: 62px; top: 100%; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
  .mascot .bubble.fade { opacity: 0; }
}
.meet { background: linear-gradient(180deg, #FFFFFF, var(--cream)); }
.meet-inner { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; display: grid; gap: 28px; align-items: center; }
@media (min-width: 820px) { .meet-inner { grid-template-columns: .85fr 1fr; gap: 56px; } }
.meet-art { width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: var(--card-radius); box-shadow: var(--shadow); }
.meet-text h2 { margin: 6px 0 0; font: 600 clamp(2rem, 1.2rem + 3vw, 3.25rem)/1.12 var(--font); letter-spacing: -.025em; }
.meet-text .kicker { margin: 0; font: 600 .8125rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.meet-text .hi { margin: 8px 0 0; font-family: "Tiro Devanagari Hindi", var(--font); color: var(--ink-2); }
.meet-text p { max-width: 46ch; color: var(--ink-2); }

/* Product cards: each product's own wordmark in place of the plain name. */
.app .card h3 .wordmark { display: block; width: auto; max-width: 100%; height: .92em; }
.app .card h3 .wordmark.caps { height: .6em; margin: .18em 0 .14em; }
/* A wordmark with a descender (the p in Ashtadeep): taller, so its letters match the others. */
.app .card h3 .wordmark.desc { height: 1.18em; margin-bottom: -.1em; }

/* Vyom in motion. His clips are whole 328 x 440 frames so they line up: the figure fills x 78-264, y 87-427 of the
   frame. Each holder is the size of the figure and the frame spills past it, so he can fly in and out of view. */
.mascot .vyom, .guard .fig .vyom, .mini-vyom img { position: absolute; max-width: none; width: 176.3%; height: auto; left: -41.9%; top: -25.6%; }
.vyom.away { visibility: hidden; }
.vyom.dropin { animation: vyom-drop 520ms cubic-bezier(.5, 0, .9, .4) both; }
.vyom.launch { animation: vyom-launch 1500ms cubic-bezier(.6, 0, 1, .6) 1450ms both; }
@keyframes vyom-drop { from { transform: translateY(-70vh); } to { transform: none; } }
@keyframes vyom-launch { from { transform: none; } to { transform: translateY(-130vh); } }

/* Header: a small Vyom stands in the bar beside the region button, landing there as the page opens; tapping him
   flies you back to the top. */
.mini-vyom { display: block; position: relative; flex: none; width: 30px; aspect-ratio: 186 / 340; margin-left: auto; }
.bar .region { margin-left: 0; }
.mini-vyom img { filter: drop-shadow(0 4px 6px rgb(20 27 51 / .25)); }
.mini-vyom .vyom.dropin { animation-name: vyom-drop-mini; }
@keyframes vyom-drop-mini { from { transform: translateY(-160px); } to { transform: none; } }
@media (min-width: 900px) { .mini-vyom { margin-left: 0; } }

/* Footer: Vyom on guard, with the way back up. */
.guard { display: flex; align-items: flex-end; gap: 40px; margin: 0 0 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.guard .fig { position: relative; flex: none; width: 104px; margin-left: 24px; aspect-ratio: 186 / 340; }
.guard .fig .vyom { filter: drop-shadow(0 12px 16px rgb(20 27 51 / .2)); }
.guard .say { padding-bottom: 6px; }
.guard .say p { margin: 0 0 12px; color: var(--ink-2); }
.guard .say .kicker { margin: 0 0 6px; font: 600 .8125rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
.guard .fly { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 980px; background: var(--ink); color: #fff; text-decoration: none; font: 500 .9375rem/1 var(--font); box-shadow: 0 6px 18px -8px rgb(20 27 51 / .6); transition: transform 160ms var(--ease-out); }
.guard .fly:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .vyom.dropin, .vyom.launch { animation: none; } }

/* The region button: its globe turns on hover, and spins while Vyom flies you to the other site. */
.region svg { transition: transform 700ms var(--ease-out); }
.region:hover svg { transform: rotate(360deg); }
.region.flying svg { animation: globe-spin 600ms linear infinite; }
.region.flying { transform: scale(.97); }
@keyframes globe-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .region svg, .region:hover svg { transition: none; transform: none; } .region.flying svg { animation: none; } }