/* ==========================================================================
   MAIN CSS — loaded non-blocking. Everything below the fold.
   Tokens come from critical.css (:root) — do not redeclare them here.
   ========================================================================== */

.section { padding-block: var(--sp-section); }
.section--surface { background: var(--c-surface); }

.section__eyebrow {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .16em;
  color: var(--c-ink-soft); margin-bottom: .6rem;
}
.section__title { font-size: var(--t-xl); letter-spacing: -.01em; }
.section__lede { color: var(--c-ink-soft); max-width: 62ch; margin-top: .85rem; }
.section__head { margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }

.grid { display: grid; gap: clamp(1rem, .5rem + 2vw, 2rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --- scroll reveal (IntersectionObserver, replaces AOS) ---------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- capability cards -------------------------------------------------- */
.card {
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 1.75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgb(0 0 0 / .07); }
.card__title { font-size: var(--t-lg); margin-bottom: .6rem; }
.card__text { color: var(--c-ink-soft); font-size: var(--t-sm); }
.card__more { display: inline-block; margin-top: 1.1rem; font-weight: 700; font-size: var(--t-sm); color: var(--c-accent); }
.card__more::after { content: " →"; }

/* --- audience (numbered — the order is meaningful: startup → enterprise) */
.audience { border-top: 1px solid var(--c-line); padding-top: 1.5rem; }
.audience__num { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-line); }
.audience__title { font-size: var(--t-lg); margin: .35rem 0 .5rem; }
.audience__text { color: var(--c-ink-soft); font-size: var(--t-sm); }

/* --- affiliations / team ---------------------------------------------- */
.tile { text-align: center; }
.tile img { margin-inline: auto; }
.tile__meta { font-size: var(--t-xs); color: var(--c-ink-soft); margin-top: .6rem; }
.tile__name { font-weight: 700; font-size: var(--t-sm); margin-top: .5rem; }

/* --- belief statements ------------------------------------------------- */
.belief + .belief { margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.belief__title { font-size: var(--t-xl); }
.belief__text { color: var(--c-ink-soft); max-width: 60ch; margin-top: .6rem; }

/* --- experience list --------------------------------------------------- */
.exp { border-top: 1px solid var(--c-line); padding-top: 1.25rem; }
.exp__eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--c-ink-soft); }
.exp__title { font-size: var(--t-lg); margin: .3rem 0 .5rem; }
.exp__text { color: var(--c-ink-soft); font-size: var(--t-sm); }

/* --- client logo wall -------------------------------------------------- */
.clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.clients li { background: var(--c-bg); display: grid; place-items: center; padding: 1.5rem 1rem; }
.clients img { max-height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease; }
.clients li:hover img { filter: none; opacity: 1; }

/* --- newsroom / blog --------------------------------------------------- */
.post { display: block; }
.post__thumb { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 4; background: var(--c-surface); }
.post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post:hover .post__thumb img { transform: scale(1.04); }
.post__title { font-size: var(--t-base); margin-top: .85rem; line-height: 1.35; }
.post:hover .post__title { color: var(--c-accent); }

.newsroom { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; align-items: center; }
.newsroom img { max-height: 54px; width: auto; margin-inline: auto; }

/* --- map: click-to-load (saves ~700KB on every homepage visit) --------- */
.map-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.map-embed img { width: 100%; height: 100%; object-fit: cover; }
.map-embed__btn {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgb(0 0 0 / .28); color: #fff; font-weight: 700; font-size: var(--t-sm);
}
.map-embed__btn span { background: var(--c-accent); padding: .7rem 1.4rem; border-radius: var(--r-sm); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- locations --------------------------------------------------------- */
.loc { border-top: 1px solid var(--c-line); padding-top: 1.1rem; }
.loc__city { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.loc address { font-style: normal; color: var(--c-ink-soft); font-size: var(--t-sm); margin: .5rem 0; }
.loc__rating { font-size: var(--t-sm); }
.loc__dir { font-size: var(--t-sm); font-weight: 700; color: var(--c-accent); }

/* --- contact form ------------------------------------------------------ */
.form { display: grid; gap: 1rem; max-width: 620px; }
.form label { font-size: var(--t-sm); font-weight: 600; display: block; margin-bottom: .35rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: .75rem .9rem; font: inherit;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-ink);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: transparent; }
.form textarea { min-height: 130px; resize: vertical; }
.form__error { color: #b42318; font-size: var(--t-xs); }

/* --- footer ------------------------------------------------------------ */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-line); padding-block: var(--sp-section) 2rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.footer__title { font-size: var(--t-lg); margin-bottom: .75rem; }
.footer__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--c-ink-soft); margin-top: 1.1rem; margin-bottom: .35rem; }
.footer__col address { font-style: normal; font-size: var(--t-sm); color: var(--c-ink-soft); }
.footer__links li a { font-size: var(--t-sm); color: var(--c-ink-soft); display: block; padding: .18rem 0; }
.footer__links li a:hover { color: var(--c-accent); }

.footer__legal { margin-top: 2.5rem; border-top: 1px solid var(--c-line); padding-top: 1.5rem; }
.disclaimer summary { cursor: pointer; font-weight: 700; font-size: var(--t-sm); }
.disclaimer ol { list-style: decimal; padding-left: 1.25rem; margin-top: .85rem; font-size: var(--t-xs); color: var(--c-ink-soft); display: grid; gap: .5rem; }
.social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; font-size: var(--t-sm); }
.social a:hover { color: var(--c-accent); }
.copyright { margin-top: 1rem; font-size: var(--t-xs); color: var(--c-ink-soft); }

/* --- map placeholder (no imagery needed) ------------------------------- */
.map-embed {
  background:
    linear-gradient(0deg,  var(--c-line) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--c-surface);
}
.map-embed__btn { background: transparent; color: var(--c-ink); flex-direction: column; padding: 1.5rem; text-align: center; }
.map-embed__btn::before {
  content: "webOdoctor Inc · Arera Colony, Bhopal";
  display: block; font-family: var(--f-display);
  font-size: var(--t-sm); font-weight: 700; margin-bottom: .75rem;
}
.map-embed__btn span { background: var(--c-btn); color: var(--c-accent-ink); text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--t-xs); }
.map-embed__btn:hover span { background: var(--c-accent); }

/* ==========================================================================
   Standard section animation pattern (site-wide)
   Entrance = staggered keyframe animation (fires when .is-in lands).
   Hover    = transition on transform.
   Separate mechanisms, so the stagger delay never slows hover response.
   All composited — zero Lighthouse cost.
   ========================================================================== */

/* Entrance: .reveal children of a .grid cascade in 90ms steps. */
.grid > .reveal.is-in { animation: rise .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.grid > .reveal.is-in:nth-child(2) { animation-delay: .09s; }
.grid > .reveal.is-in:nth-child(3) { animation-delay: .18s; }
.grid > .reveal.is-in:nth-child(4) { animation-delay: .27s; }
.grid > .reveal.is-in:nth-child(5) { animation-delay: .36s; }
.grid > .reveal.is-in:nth-child(6) { animation-delay: .45s; }
.grid > .reveal.is-in:nth-child(n+7) { animation-delay: .5s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Hover: lift the block, pop the image. */
.tile { transition: transform .25s ease; }
.tile:hover { transform: translateY(-6px); }
.tile img { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.tile:hover img { transform: scale(1.08); }

.audience, .exp { transition: transform .25s ease; }
.audience:hover, .exp:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .grid > .reveal.is-in { animation: none; }
  .tile, .tile img, .audience, .exp { transition: none !important; transform: none !important; }
}

/* --- newsroom press cards (overrides earlier .newsroom rules) ----------- */
.newsroom { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1rem, .5rem + 2vw, 2rem); align-items: stretch; }

.press {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; align-content: start; gap: .35rem;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 2.25rem 1.5rem 1.75rem; text-align: center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.press:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgb(0 0 0 / .09); }

/* gradient hairline sweeping across the top edge on hover */
.press::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.press:hover::before { transform: scaleX(1); }

.press__logo img {
  width: 72px; height: 72px; object-fit: contain; margin-inline: auto;
  filter: grayscale(1); opacity: .75;
  transition: filter .3s ease, opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.press:hover .press__logo img { filter: none; opacity: 1; transform: scale(1.08); }

.press__name { font-family: var(--f-display); font-weight: 800; font-size: var(--t-base); margin-top: .9rem; }
.press__line { font-size: var(--t-xs); color: var(--c-ink-soft); max-width: 26ch; }

.press__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .9rem; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--c-accent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.press:hover .press__cta { opacity: 1; transform: none; }
.press__cta i { font-style: normal; transition: transform .25s ease; }
.press:hover .press__cta i { transform: translateX(4px); }

/* staggered entrance, same rhythm as the grids */
.newsroom > .reveal.is-in { animation: rise .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.newsroom > .reveal.is-in:nth-child(2) { animation-delay: .09s; }
.newsroom > .reveal.is-in:nth-child(3) { animation-delay: .18s; }

@media (hover: none) {
  /* touch devices: CTA always visible, logos in colour */
  .press__cta { opacity: 1; transform: none; }
  .press__logo img { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .newsroom > .reveal.is-in { animation: none; }
  .press, .press::before, .press__logo img, .press__cta, .press__cta i { transition: none !important; }
}

/* --- blog cards, premium treatment (overrides earlier .post rules) ------ */
.post {
  display: grid; align-content: start; overflow: hidden;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.post:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgb(0 0 0 / .09); }

.post__thumb { position: relative; aspect-ratio: 3 / 2; border-radius: 0; overflow: hidden; background: var(--c-surface); }
.post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.post:hover .post__thumb img { transform: scale(1.06); }

/* darkening scrim rises from the bottom on hover */
.post__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .35) 100%);
  opacity: 0; transition: opacity .3s ease;
}
.post:hover .post__thumb::after { opacity: 1; }

/* corner arrow badge slides in over the image */
.post__badge {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 1;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--grad-accent); color: #fff; border-radius: 50%;
  font-size: 1.1rem;
  opacity: 0; transform: translateY(10px) scale(.8);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.post:hover .post__badge { opacity: 1; transform: none; }

.post__body { display: grid; gap: .45rem; padding: 1.25rem 1.4rem 1.5rem; }
.post__meta {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-ink-soft);
}
.post__title { font-size: var(--t-base); line-height: 1.4; margin: 0; transition: color .2s ease; }
.post:hover .post__title { color: var(--c-accent); }

.post__cta {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--c-accent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.post:hover .post__cta { opacity: 1; transform: none; }
.post__cta i { font-style: normal; transition: transform .25s ease; }
.post:hover .post__cta i { transform: translateX(4px); }

@media (hover: none) {
  .post__cta { opacity: 1; transform: none; }
  .post__badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .post, .post__thumb img, .post__thumb::after, .post__badge, .post__title, .post__cta, .post__cta i { transition: none !important; }
}

/* --- audience blocks: sweeping top line + gradient numbers on hover ----- */
.audience { position: relative; border-top: 1px solid var(--c-line); padding-top: 1.5rem; }

/* gradient hairline draws left-to-right along the existing top border */
.audience::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.audience:hover::before { transform: scaleX(1); }

.audience__num { transition: color .25s ease; }
.audience:hover .audience__num {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .audience:hover .audience__num { color: var(--c-accent); background: none; }
}

/* same treatment for the experience list, which shares the layout */
.exp { position: relative; }
.exp::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.exp:hover::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .audience::before, .exp::before, .audience__num { transition: none !important; }
}

/* --- affiliation tiles: certificate cards with glint sweep -------------- */
.tile {
  position: relative; overflow: hidden;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 2rem 1.5rem 1.6rem;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgb(0 0 0 / .09); }

/* gradient hairline along the top, same as newsroom */
.tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  z-index: 1;
}
.tile:hover::before { transform: scaleX(1); }

/* foil glint: a light band sweeps diagonally across on hover */
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .55) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.tile:hover::after { transition: transform .7s ease; transform: translateX(130%); }

.tile__meta {
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  transition: color .25s ease;
}
.tile:hover .tile__meta { color: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile::before, .tile::after, .tile__meta { transition: none !important; }
  .tile::after { display: none; }
}

/* --- client wall: fixed 6x2 grid + centered view-more ------------------- */
.clients { grid-template-columns: repeat(6, 1fr); }
.clients li { padding: 2rem 1.25rem; }
.clients img { max-height: 52px; }
@media (max-width: 900px)  { .clients { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .clients { grid-template-columns: repeat(2, 1fr); } }

.section__more { text-align: center; margin-top: 2.25rem; }

/* ghost buttons take the signature gradient on hover */
.btn--ghost { position: relative; z-index: 0; overflow: hidden; }
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-accent);
  opacity: 0; transition: opacity .25s ease;
}
.btn--ghost:hover { background: none; color: #fff; border-color: transparent; }
.btn--ghost:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .btn--ghost::before { transition: none; } }

/* ==========================================================================
   Interior pages: hero, breadcrumbs, and .prose styling for CMS content
   ========================================================================== */
.page-hero {
  position: relative; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
  background:
    url("/assets/newtheme/img/tri.svg") 0 0 / 560px auto repeat;
  border-bottom: 1px solid var(--c-line);
}
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--t-xs); color: var(--c-ink-soft); margin-bottom: 1rem; }
.crumbs a:hover { color: var(--c-accent); }
.crumbs [aria-current] { color: var(--c-ink); font-weight: 600; }
.page-hero__title {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); text-transform: uppercase;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
@supports not (background-clip: text) { .page-hero__title { color: var(--c-accent); } }

/* .prose: makes CMS-authored HTML look native to the theme without
   touching the stored content. */
.prose { max-width: 860px; }
.prose h2, .prose h3, .prose h4 { margin: 2.2em 0 .6em; line-height: 1.2; }
.prose h2 { font-size: var(--t-xl); }
.prose h3 { font-size: var(--t-lg); }
.prose h4 { font-size: var(--t-base); }
.prose h5 {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .12em;
  margin: 2em 0 .4em; padding-left: .9rem; position: relative;
}
.prose h5::before {
  content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 4px;
  background: var(--grad-accent); border-radius: 2px;
}
.prose p { margin: 0 0 1.1em; color: var(--c-ink-soft); }
.prose h5 + p { font-size: var(--t-sm); }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.25em; color: var(--c-ink-soft); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--c-accent); font-weight: 600; }
.prose a:hover { text-decoration: underline; }
.prose img { border-radius: var(--r-md); margin: 1.5em 0; }
.prose strong { color: var(--c-ink); }
.prose blockquote {
  border-left: 4px solid var(--c-accent); margin: 1.5em 0; padding: .25em 0 .25em 1.25em;
  color: var(--c-ink); font-weight: 600;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--t-sm); }
.prose th, .prose td { border: 1px solid var(--c-line); padding: .6em .8em; text-align: left; }
.prose th { background: var(--c-surface); }

/* --- content accordions (legacy .accordion markup, restyled) ------------ */
.prose .accordion {
  display: block; width: 100%; text-align: left;
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg);
  padding: 1.1rem 3rem 1.1rem 0; margin-top: .5rem;
  border-top: 1px solid var(--c-line);
  position: relative; color: var(--c-ink);
  transition: color .2s ease;
}
.prose .accordion::after {
  content: "+"; position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%);
  font-weight: 400; font-size: 1.5rem; color: var(--c-accent);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.prose .accordion:hover { color: var(--c-accent); }
.prose .accordion.is-open::after { transform: translateY(-50%) rotate(45deg); }

.prose .accordion-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.22, 1, .36, 1);
}
.prose .accordion-panel > :first-child { margin-top: .5rem; }
.prose .accordion-panel > :last-child { margin-bottom: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .prose .accordion::after, .prose .accordion-panel { transition: none !important; }
}

/* ==========================================================================
   Legacy feature "flip cards" — native override (loads after legacy.css).
   Icon face always visible; description expands on hover, matching the old
   theme's reveal but sized for the interior layout.
   ========================================================================== */

/* NOTE: no FontAwesome @font-face override here. The extracted legacy.css
   carries the correct unicode-ranged faces (solid + regular + v4compat);
   a rangeless face declared here would shadow them and break v4 glyphs. */

.prose .feature-section { max-width: none; }
.prose .feature-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem; align-items: start;
}
.prose .feature-container .card {
  width: auto; margin: 0;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg); overflow: hidden;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.prose .feature-container .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgb(0 0 0 / .09);
}

/* Both faces flow normally — the old +/-100px slide is cancelled. */
.prose .feature-container .card .face { transform: none !important; height: auto; }

.prose .feature-container .card .face.card-icon {
  height: 150px; background: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
}
.prose .feature-container .card .face.card-icon .content { opacity: 1; }
.prose .feature-container .card .face.card-icon .content i {
  font-size: 40px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.prose .feature-container .card:hover .face.card-icon .content i {
  transform: scale(1.12);
}
.prose .feature-container .card .face.card-icon .content h3 {
  font-size: var(--t-sm); margin-top: .6rem; letter-spacing: .06em;
}
/* legacy already flips this face to the pink gradient on hover — keep it,
   just make the text readable on it */
.prose .feature-container .card:hover .face.card-icon .content h3,
.prose .feature-container .card:hover .face.card-icon .content i { color: #fff; }

/* Description face: collapsed, expands on hover (the "open" behaviour). */
.prose .feature-container .card .face.card-text {
  box-shadow: none; display: block;
  max-height: 0; opacity: 0; padding: 0 1.2rem; overflow: hidden;
  transition: max-height .45s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease, padding .3s ease;
}
.prose .feature-container .card:hover .face.card-text {
  max-height: 420px; opacity: 1; padding: 1.1rem 1.2rem 1.3rem;
}
.prose .feature-container .card .face.card-text .content p {
  font-size: var(--t-sm); color: var(--c-ink-soft);
}

/* Touch devices can't hover: description always open. */
@media (hover: none) {
  .prose .feature-container .card .face.card-text {
    max-height: none; opacity: 1; padding: 1.1rem 1.2rem 1.3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prose .feature-container .card,
  .prose .feature-container .card .face.card-text,
  .prose .feature-container .card .face.card-icon .content i { transition: none !important; }
}

/* ==========================================================================
   Legacy process stepper — native override. Horizontal steps with icon
   circles on a connector line; panels switch on click (see app.js).
   ========================================================================== */
.prose ul.process-tabs {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; width: 100%;
}
.prose ul.process-tabs li {
  flex: 1 1 0; min-width: 120px; text-align: center;
  position: relative; cursor: pointer; padding: 0 .5rem;
}
.prose ul.process-tabs li::marker { content: ""; }
/* connector line between circles */
.prose ul.process-tabs li:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; right: -50%; top: 25px;
  height: 2px; background: var(--c-line); z-index: 0;
}
.prose ul.process-tabs li.visited:not(:last-child)::after {
  background: var(--grad-accent);
}
.prose ul.process-tabs li span {
  position: relative; z-index: 1;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; background: var(--c-bg);
  border: 2px solid var(--c-line);
  transition: border-color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.prose ul.process-tabs li:hover span { transform: scale(1.1); }
.prose ul.process-tabs li.active span,
.prose ul.process-tabs li.visited span { border-color: var(--c-accent); }
.prose ul.process-tabs li span i {
  font-size: 22px !important; line-height: 1;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .prose ul.process-tabs li span i { color: var(--c-accent); -webkit-text-fill-color: currentColor; }
}
.prose ul.process-tabs li p {
  font-size: var(--t-xs); font-weight: 600; margin: .6rem 0 0;
  color: var(--c-ink-soft); text-align: center !important;
  transition: color .2s ease;
}
.prose ul.process-tabs li.active p { color: var(--c-ink); }

/* panels */
.prose .process-tabs-container {
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  margin-top: 1.5rem;
}
.prose .process-tabs-container .process-tab { display: none; padding: 1.75rem 2rem; }
.prose .process-tabs-container .process-tab.active { display: block; animation: rise .4s cubic-bezier(.22, 1, .36, 1); }

@media (max-width: 640px) {
  .prose ul.process-tabs { gap: 1rem 0; }
  .prose ul.process-tabs li { flex-basis: 33%; }
  .prose ul.process-tabs li:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prose ul.process-tabs li span { transition: none; }
  .prose .process-tabs-container .process-tab.active { animation: none; }
}

/* --- converted-content hygiene ------------------------------------------ */
/* collapse empty paragraphs / line-break stacks the old editor left behind */
.prose p:empty, .prose div:empty:not([class]) { display: none; }
.prose > br:first-child { display: none; }
/* the first real element in content shouldn't add its own top margin */
.prose > :first-child { margin-top: 0 !important; }

/* --- blog: article detail + pagination ---------------------------------- */
.page-hero__title--article { text-transform: none; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); line-height: 1.2; }
.article-meta { margin-top: .75rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); }

.article-hero { margin: 0 0 2rem; }
.article-hero img { width: 100%; height: auto; border-radius: var(--r-md); }

.pager { display: flex; justify-content: center; gap: .35rem; margin-top: 2.5rem; }
.pager a, .pager strong, .pager span {
  min-width: 40px; padding: .5rem .75rem; text-align: center;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600;
}
.pager a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pager strong { background: var(--c-btn); color: #fff; border-color: var(--c-btn); }

/* --- e-book cards -------------------------------------------------------- */
.ebook-card {
  position: relative; overflow: hidden;
  display: grid; align-content: start;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.ebook-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgb(0 0 0 / .09); }
.ebook-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.ebook-card:hover::before { transform: scaleX(1); }

.ebook-card__cover { background: var(--c-surface); padding: 2rem 2rem 0; display: flex; justify-content: center; }
.ebook-card__cover img {
  width: min(80%, 260px); height: auto;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 10px 30px rgb(0 0 0 / .15);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.ebook-card:hover .ebook-card__cover img { transform: translateY(-6px) scale(1.02); }

.ebook-card__body { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .45rem; }
.ebook-card__title { font-size: var(--t-base); line-height: 1.35; margin: 0; }
.ebook-card:hover .ebook-card__title { color: var(--c-accent); }
.ebook-card__desc { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0; }
.ebook-card__cta {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--c-accent);
}
.ebook-card__cta i { font-style: normal; transition: transform .25s ease; }
.ebook-card:hover .ebook-card__cta i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ebook-card, .ebook-card::before, .ebook-card__cover img, .ebook-card__cta i { transition: none !important; }
}

/* --- career: job cards + application form extras ------------------------ */
.job-list { display: grid; gap: 1rem; max-width: 860px; }
.job-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 1.5rem 1.75rem;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.job-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgb(0 0 0 / .09); }
.job-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--grad-accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.job-card:hover::before { transform: scaleY(1); }

.job-card__title { font-size: var(--t-lg); margin: 0 0 .25rem; }
.job-card:hover .job-card__title { color: var(--c-accent); }
.job-card__blurb { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0 0 .6rem; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: var(--t-xs); color: var(--c-ink-soft); }
.job-card__meta li { position: relative; }
.job-card__meta li + li::before { content: "·"; position: absolute; left: -0.8rem; }
.job-card__cta {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--c-accent);
}
.job-card__cta i { font-style: normal; transition: transform .25s ease; }
.job-card:hover .job-card__cta i { transform: translateX(4px); }

@media (max-width: 560px) {
  .job-card { flex-direction: column; align-items: flex-start; }
}

.form-flash { max-width: 620px; padding: .8rem 1rem; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; margin-bottom: 1.25rem; }
.form-flash--ok  { background: #e7f6ec; color: #17643a; border: 1px solid #b7e0c6; }
.form-flash--err { background: #fdecec; color: #8f2020; border: 1px solid #f2c4c4; }
.form-hint { font-size: var(--t-xs); color: var(--c-ink-soft); margin-top: .35rem; }
.form input[type="file"] { padding: .55rem .9rem; }

@media (prefers-reduced-motion: reduce) {
  .job-card, .job-card::before, .job-card__cta i { transition: none !important; }
}

/* --- client wall: larger logos (override of earlier sizing) ------------- */
.clients img { max-height: 76px; max-width: 82%; }
.clients li { padding: 2.25rem 1rem; }

/* ==========================================================================
   Brand icons (fa-android, fa-apple, ...) — these glyphs live in the
   separate Brands font family. The extracted legacy CSS carries their
   codepoints but not the family switch, so route them explicitly.
   ========================================================================== */
@font-face {
  font-family: "Font Awesome 6 Brands";
  src: url("/catalogs/assets/webfonts/fa-brands-400.woff2") format("woff2"),
       url("/catalogs/assets/webfonts/fa-brands-400.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: block;
}

.prose .fa-android, .prose .fa-apple, .prose .fa-windows,
.prose .fa-react, .prose .fa-angular, .prose .fa-vuejs,
.prose .fa-node, .prose .fa-node-js, .prose .fa-php, .prose .fa-laravel,
.prose .fa-wordpress, .prose .fa-wordpress-simple, .prose .fa-shopify,
.prose .fa-magento, .prose .fa-joomla, .prose .fa-drupal,
.prose .fa-java, .prose .fa-python, .prose .fa-swift,
.prose .fa-html5, .prose .fa-css3, .prose .fa-css3-alt,
.prose .fa-js, .prose .fa-js-square, .prose .fa-square-js,
.prose .fa-bootstrap, .prose .fa-sass, .prose .fa-less, .prose .fa-npm,
.prose .fa-github, .prose .fa-gitlab, .prose .fa-bitbucket, .prose .fa-git-alt,
.prose .fa-docker, .prose .fa-aws, .prose .fa-google, .prose .fa-google-play,
.prose .fa-app-store, .prose .fa-app-store-ios, .prose .fa-figma, .prose .fa-sketch,
.prose .fa-facebook, .prose .fa-facebook-f, .prose .fa-instagram,
.prose .fa-twitter, .prose .fa-x-twitter, .prose .fa-linkedin, .prose .fa-linkedin-in,
.prose .fa-youtube, .prose .fa-whatsapp, .prose .fa-pinterest, .prose .fa-telegram,
.prose .fa-unity, .prose .fa-stripe, .prose .fa-paypal, .prose .fa-cc-visa,
.prose .fa-opencart, .prose .fa-hotjar, .prose .fa-mailchimp {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   Flaticon sets — two packs shipped under the SAME family name "Flaticon",
   which can only ever load one. Split into distinct families and route each
   class to its own font (mapping from the font audit).
   ========================================================================== */
@font-face {
  font-family: "Flaticon-Game";
  src: url("/catalogs/assets/css/game-icon/font/Flaticon.woff2") format("woff2"),
       url("/catalogs/assets/css/game-icon/font/Flaticon.woff") format("woff"),
       url("/catalogs/assets/css/game-icon/font/Flaticon.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Flaticon-WA";
  src: url("/catalogs/assets/css/whatsapp-service-icon/font/Flaticon.woff2") format("woff2"),
       url("/catalogs/assets/css/whatsapp-service-icon/font/Flaticon.woff") format("woff"),
       url("/catalogs/assets/css/whatsapp-service-icon/font/Flaticon.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: block;
}

/* game / sports pack */
.prose .flaticon-ball::before, .prose .flaticon-ball::after,
.prose .flaticon-bet::before, .prose .flaticon-bet::after,
.prose .flaticon-black-jack::before, .prose .flaticon-black-jack::after,
.prose .flaticon-cricket::before, .prose .flaticon-cricket::after,
.prose .flaticon-pet::before, .prose .flaticon-pet::after,
.prose .flaticon-soccer::before, .prose .flaticon-soccer::after,
.prose .flaticon-sports-and-competition::before, .prose .flaticon-sports-and-competition::after,
.prose .flaticon-token::before, .prose .flaticon-token::after {
  font-family: "Flaticon-Game" !important;
}

/* whatsapp / chatbot pack */
.prose .flaticon-business-card::before, .prose .flaticon-business-card::after,
.prose .flaticon-customer::before, .prose .flaticon-customer::after,
.prose .flaticon-ip::before, .prose .flaticon-ip::after,
.prose .flaticon-robot::before, .prose .flaticon-robot::after,
.prose .flaticon-robotic::before, .prose .flaticon-robotic::after,
.prose .flaticon-shout::before, .prose .flaticon-shout::after,
.prose .flaticon-user::before, .prose .flaticon-user::after,
.prose .flaticon-whatsapp::before, .prose .flaticon-whatsapp::after {
  font-family: "Flaticon-WA" !important;
}