/* ==========================================================================
   DAYAL INFOSYSTEMS - SHARED SITE STYLES
   Updated for Executive Cobalt Blue Theme & Bootstrap Icons
   ========================================================================== */

/* ---------- Control Colors ---------- */
html[data-theme="light"] {
  --dg-accent: var(--primary, #1d4ed8);
  --tool-bg: #ffffff;
  --tool-ink: #0f172a;
  --tool-muted: #64748b;
  --tool-line: rgba(0, 0, 0, .14);
  --tool-hover: rgba(29, 78, 216, .1);
  --tool-active: rgba(29, 78, 216, .18);
  --panel-bg: #ffffff;
  --panel-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
html[data-theme="dark"] {
  --dg-accent: #3b82f6;
  --tool-bg: #0f1b33;
  --tool-ink: #f1f5f9;
  --tool-muted: #94a3b8;
  --tool-line: rgba(255, 255, 255, .22);
  --tool-hover: rgba(59, 130, 246, .16);
  --tool-active: rgba(59, 130, 246, .26);
  --panel-bg: #0b1329;
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, .65);
}

/* ---------- Header Controls ---------- */
.header-actions .nav-tools { display: flex; align-items: center; gap: .55rem; position: relative; }
.header-actions .lang-wrap { position: static; }
.header-actions .lang-panel { right: 0; }
.tool-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.tool-caret { transition: transform .25s ease; }
.lang-btn[aria-expanded="true"] .tool-caret { transform: rotate(180deg); }

/* ---------- Navbar Tools (Language + Theme) ---------- */
.nav-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-inline: .5rem;
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .3rem .85rem;
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  background: var(--tool-bg);
  color: var(--tool-ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}
.tool-btn:hover { background: var(--tool-hover); border-color: var(--dg-accent); }
.tool-btn:focus-visible,
.lang-opt:focus-visible,
.lang-search:focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 2px;
}
.tool-btn.icon-only { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 1rem; }

.tool-btn > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
.tool-btn > i::before { display: block; line-height: 1; vertical-align: 0; }
.tool-btn.icon-only > i { font-size: 1.05rem; }
.tool-caret { font-size: .7rem; transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] .tool-caret { transform: rotate(180deg); }

.lang-current { display: block; overflow: visible; line-height: 1.2; transform: translateY(var(--lang-nudge, 0px)); }

.lang-wrap { position: relative; }
.lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  width: min(480px, 94vw);
  max-height: min(72vh, 520px);
  overflow-y: auto;
  padding: .6rem;
  border: 1px solid var(--tool-line);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}
.lang-panel[hidden] { display: none; }

.lang-search {
  width: 100%;
  height: 40px;
  margin-bottom: .5rem;
  padding: 0 .8rem;
  border: 1px solid var(--tool-line);
  border-radius: 10px;
  background: transparent;
  color: var(--tool-ink);
  font: inherit;
  font-size: .9rem;
}
.lang-search::placeholder { color: var(--tool-muted); }

.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.lang-group {
  grid-column: 1 / -1;
  margin: .6rem .75rem .2rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--tool-line);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tool-muted);
}
.lang-group[hidden] { display: none; }

.lang-opt {
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tool-ink);
  text-align: start;
  cursor: pointer;
}
.lang-opt:hover { background: var(--tool-hover); }
.lang-opt[aria-current="true"] { background: var(--tool-active); }
.lang-opt[aria-current="true"] .native::after { content: "  \2713"; color: var(--dg-accent); }
.lang-opt .native,
.lang-opt .eng {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-align: left;
}
.lang-opt .native { font-size: 1rem; font-weight: 600; line-height: 1.7; }
.lang-opt .eng { font-size: .75rem; color: var(--tool-muted); }
.lang-opt[hidden] { display: none; }
.lang-empty { margin: .5rem .25rem; font-size: .85rem; color: var(--tool-muted); }

/* ---------- Strict Page-Wide No-Scroll Rules ---------- */
html, body {
  overflow-x: hidden !important;
}

/* ---------- Tagline Capsule Responsive Wrap ---------- */
.tagline-container { overflow: visible !important; width: 100%; }
.tagline-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  white-space: normal !important;
  max-width: 100%;
  row-gap: 6px;
  column-gap: 10px;
}
.tagline-pill > span { white-space: nowrap; }

@media (max-width: 640px) {
  .tagline-pill .dot-sep { display: none; }
  .tagline-pill { gap: 4px 12px; font-size: .7rem !important; padding: 8px 14px !important; }
}

/* ==========================================================================
   LOCAL IMAGE PLACEHOLDERS
   The stock photos came from an external host, so each picture slot is now
   drawn in CSS. Drop your own photos in later by swapping .img-placeholder
   back to an <img> - the surrounding layout does not change.
   ========================================================================== */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .72);
  font-size: 2.4rem;
  position: relative;
  overflow: hidden;
}
.img-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.img-placeholder i { position: relative; z-index: 1; }
.img-card, .mosaic-card, .gallery-img-wrap { background: var(--bg-subtle, #0f172a); }

/* ---------- Office address card (replaces the embedded map) ---------- */
.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 2rem;
  border-radius: 12px;
  background: linear-gradient(140deg, #0f172a 0%, #1e3a8a 100%);
  color: #ffffff;
}
.map-placeholder > i { font-size: 2.1rem; color: #60a5fa; }
.map-placeholder .map-office { font-size: 1.15rem; font-weight: 800; }
.map-placeholder .map-addr { font-size: .92rem; color: rgba(255, 255, 255, .8); line-height: 1.6; }
.map-placeholder .map-open {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: 30px;
  background: #2563eb;
  color: #ffffff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.map-placeholder .map-open:hover { background: #1d4ed8; }

/* ==========================================================================
   SHARED UI POLISH
   Small, consistent refinements so all seven pages feel like one site.
   ========================================================================== */
header { padding-inline: clamp(1rem, 4vw, 2.5rem) !important; gap: 1rem; }
.brand-name { white-space: nowrap; }
.nav-link { border-radius: 8px; }
.nav-link:hover, .nav-link.active { background: var(--tool-hover); }
.dropdown-menu { border-radius: 14px !important; padding: 8px !important; }
.dropdown-item { border-radius: 9px; }

/* Cards lift by the same amount everywhere */
:is(.pillar-card, .drive-card, .value-card, .gallery-card, .addon-row-card,
    .mosaic-card, .img-card, .module-icon-pill) {
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

/* Translated text runs longer, so rows stay level instead of stepping */
.pillars-grid, .drives-grid, .values-grid { align-items: stretch; }
:is(.pillar-card, .drive-card, .value-card) { height: 100%; }

/* Long words, addresses and translated strings wrap instead of overflowing */
:is(.nav-link, .dropdown-item, .footer-links a, .footer-contact-item,
    .address-details, .addon-text, .icon-item-content, .event-desc,
    .hero-headline, .hero-description, .page-banner h1, .map-placeholder,
    .section-title, .intro-title, .gallery-title) { overflow-wrap: anywhere; }

:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }

/* Decorative layers never add page width */
:is(.laptop-glow, .module-nodes, .connection-svg, .slide, .slide-bg, .cta-orb,
    .hero-orb, .h-glow) { max-width: 100vw; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .header-actions .nav-tools { width: 100%; flex-direction: column; align-items: stretch; gap: .6rem; margin-inline: 0; }
  .header-actions .lang-wrap { width: 100%; }
  .header-actions .lang-btn { width: 100%; justify-content: space-between; }
  .header-actions .lang-panel {
    position: static; width: 100%; max-height: 50vh; margin-top: .5rem; box-shadow: none;
  }
  .header-actions .theme-btn { width: 100%; border-radius: 30px; }
  .nav-menu-wrapper { overflow-y: auto; }
  .lang-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .brand-name { font-size: .92rem !important; }
  .logo-badge { width: 34px !important; height: 34px !important; }
  .hero-headline { font-size: 1.75rem !important; }
  .page-banner h1 { font-size: 1.75rem !important; }
  .node { display: none; }          /* floating chips crowd a small screen */
  .connection-svg { opacity: .4; }
  .container { padding-inline: 1.1rem !important; }
  .map-placeholder { min-height: 230px; padding: 1.5rem; }
  .img-placeholder { min-height: 120px; font-size: 1.8rem; }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* Visitors who asked for less motion get none of the drifting animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   TRANSLATION ENGINE SUPPORT  -  do not remove
   These rules are what make the language switch work. The priming block has
   to stay on screen (tiny and behind the page) because the translator skips
   anything that is hidden or far below the fold.
   ========================================================================== */
#dg-prime {
  position: fixed;
  inset: 0;
  z-index: -1;            /* behind the page, so the visitor never sees it */
  overflow: hidden;
  pointer-events: none;
  font-size: 2px;         /* every line fits on one screen, so none is skipped */
  line-height: 1.05;
}
#dg-gt { display: none !important; }

/* No flash of English before a saved language is applied */
html.dg-pending body { visibility: hidden; }
html.dg-auto-wait body > *:not(#loader) { visibility: hidden; }

/* The translator adds a banner offset and highlights; both are suppressed */
html.dg-auto body,
html.translated-ltr body,
html.translated-rtl body { top: 0 !important; position: static !important; }
html.dg-auto font,
html.translated-ltr font,
html.translated-rtl font { background: none !important; box-shadow: none !important; }
.goog-te-banner-frame, .skiptranslate, #goog-gt-tt { display: none !important; }

/* ---------- Script fonts for Indian languages ---------- */
html[data-script] body,
html[data-script] :is(h1, h2, h3, h4, h5, h6, p, a, span, li, small, em, button, input, label, .menu a, .drop a, .drop-btn, .title) {
  font-family: var(--script-font), "Segoe UI", system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
/* The mSATHI wordmark keeps its own fonts in EVERY language. The rule above
   covers <span>, which is what the wordmark is built from, so it is undone
   here for the hero wordmark and the faded watermark behind the Why section. */
html[data-script] .stemp-text,
html[data-script] .hero-title .stemp-text { font-family: "StempSchBlaIta" !important; }
html[data-script] .babylon-text,
html[data-script] .hero-title .babylon-text { font-family: 'Babylon5', sans-serif !important; }
html[data-script] :is(.hero-title, .why-big-text),
html[data-script] :is(.hero-title, .why-big-text) span {
  font-family: 'Teko', sans-serif;
  letter-spacing: -.01em;
}
html[data-script] .hero-title .stemp-text,
html[data-script] .hero-title .babylon-text { letter-spacing: normal; }
/* Indic scripts need a little more vertical room for matras and conjuncts */
html[data-script] :is(h1, h2, h3) { line-height: 1.4; }
html[data-script] p { line-height: 1.75; }

/* Urdu, Kashmiri, Sindhi: the words read right-to-left (needed for correct
   letter and punctuation order) but every block KEEPS the same alignment as
   the English page. The JS pins each element's original alignment inline. */
html[data-dir="rtl"] :is([data-i18n], [data-i18n-html]) { direction: rtl; unicode-bidi: isolate; }
/* Arabic, Urdu, Kashmiri, Sindhi all follow the same rule above. */
html[lang="ur"] [data-i18n] { line-height: 2.1; }

/* Wide letter-spacing pulls Indian-script letters apart: switch it off in those languages */
html[data-script] :is(.nav-link, .dropdown-item, .brand-name, .lang-option, .btn-know-more, .tab-nav-btn) {
  letter-spacing: normal;
}
html[data-script] :is(.hero-headline, .hero-title-wrap h1, .page-banner h1, .section-title, .intro-title, .gallery-title, .process-header-title, .tech-title) { line-height: 1.4; }

/* Long words (some languages) wrap instead of pushing the page wider than the screen */
:is(.hero-headline, .hero-description, .nav-link, .dropdown-item, .pillar-card, .drive-card, .value-card, .addon-text, .icon-item-content, .event-desc, .address-details, .footer-links a) {
  overflow-wrap: anywhere;
}



/* The top bar now carries only the group line plus one link to the group site;
   the company switcher has moved to the footer and the group strip. */
#groupBar .group-home { display: inline-flex; align-items: center; gap: 4px; color: #cfe7d7; font-weight: 700; }
#groupBar .group-home:hover { color: #fff; }

/* ==========================================================
   DARK THEME
   The hero is a photograph-led panel, so it stays dark in both
   themes; the controls and the language list are what change.
   ========================================================== */
html[data-theme="dark"] #hero { background: linear-gradient(110deg, #04273f 0%, #063c5c 45%, #0a5d6e 100%); }
html[data-theme="dark"] #hero::after {
  background: linear-gradient(110deg, rgba(3, 22, 38, .92) 0%, rgba(5, 40, 62, .86) 45%, rgba(9, 76, 92, .78) 100%);
}
html[data-theme="dark"] .drop { background: #06203a; }
html[data-theme="dark"] body { background: #061626; }

/* Smooth colour change only when the visitor flips the theme (not on page load) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim *, .tool-btn, .tool-caret { transition: none !important; }
}

/* ---------- Automatic translation: hide Google's own toolbar, tooltips and highlights ---------- */
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
#dg-gt { display: none !important; }
/* Google Translate pushes the page down by 40px for its own banner, and it
   REPLACES the <html> class attribute, so a rule relying only on our own
   class stops matching. These cover its classes as well, which is what
   kept a white strip showing above the hero in some languages. */
html.dg-auto body,
html.translated-ltr body,
html.translated-rtl body { top: 0 !important; position: static !important; }
.goog-text-highlight,
html.dg-auto font,
html.translated-ltr font,
html.translated-rtl font { background: none !important; box-shadow: none !important; }
/* Google flips the page right-to-left for Urdu/Arabic/Sindhi; keep the layout as designed */
html.translated-rtl body { direction: ltr; }

/* ---------- No English flash while a language is being applied ---------- */
html.dg-pending body { visibility: hidden; }
/* While the automatic translation fills the page in, the content is made
   invisible with opacity (not visibility), because the translator skips
   elements it considers hidden. */
html.dg-auto-wait body > *:not(#loader) { opacity: 0 !important; transition: none !important; }

/* The hidden block used for that one pass: on screen for the translator,
   invisible to the visitor, and removed as soon as it is done. */
#dg-prime {
  position: fixed;
  inset: 0;
  z-index: -1;            /* sits behind the page, so the visitor never sees it */
  overflow: hidden;
  pointer-events: none;
  font-size: 2px;         /* every line fits on one screen, so none is skipped */
  line-height: 1.05;
}



/* Smooth colour change only when the visitor flips the theme (not on page load) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim *, .tool-btn, .tool-caret { transition: none !important; }
}

/* ---------- Automatic translation: hide Google's own toolbar, tooltips and highlights ---------- */
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
#dg-gt { display: none !important; }
/* Google Translate pushes the page down by 40px for its own banner, and it
   REPLACES the <html> class attribute, so a rule relying only on our own
   class stops matching. These cover its classes as well, which is what
   kept a white strip showing above the hero in some languages. */
html.dg-auto body,
html.translated-ltr body,
html.translated-rtl body { top: 0 !important; position: static !important; }
.goog-text-highlight,
html.dg-auto font,
html.translated-ltr font,
html.translated-rtl font { background: none !important; box-shadow: none !important; }
/* Google flips the page right-to-left for Urdu/Arabic/Sindhi; keep the layout as designed */
html.translated-rtl body { direction: ltr; }

/* ---------- No English flash while a language is being applied ---------- */
html.dg-pending body { visibility: hidden; }
/* While the automatic translation fills the page in, the content is made
   invisible with opacity (not visibility), because the translator skips
   elements it considers hidden. */
html.dg-auto-wait body > *:not(#loader) { opacity: 0 !important; transition: none !important; }

/* The hidden block used for that one pass: on screen for the translator,
   invisible to the visitor, and removed as soon as it is done. */
#dg-prime {
  position: fixed;
  inset: 0;
  z-index: -1;            /* sits behind the page, so the visitor never sees it */
  overflow: hidden;
  pointer-events: none;
  font-size: 2px;         /* every line fits on one screen, so none is skipped */
  line-height: 1.05;
}


/* ==========================================================================
   SHARED UI POLISH
   Small, consistent refinements so every page feels like one site.
   ========================================================================== */

/* A smoother, more even navbar on every page */
header { padding-inline: clamp(1rem, 4vw, 2.5rem) !important; gap: 1rem; }
.brand-name { white-space: nowrap; }
.nav-link { border-radius: 8px; padding: .45rem .6rem !important; }
.nav-link:hover { background: var(--tool-hover); }
.nav-link.active { background: var(--tool-hover); }

/* Dropdown: same shape and motion everywhere */
.dropdown-menu { border-radius: 14px !important; padding: 8px !important; }
.dropdown-item { border-radius: 9px; }
.dropdown-item:hover { padding-left: 18px !important; }

/* Cards lift the same amount across pages */
:is(.pillar-card, .drive-card, .value-card, .gallery-card, .addon-row-card, .mosaic-card, .img-card) {
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

/* Equal heights: translated text is longer, so rows stay level */
.pillars-grid, .drives-grid, .values-grid { align-items: stretch; }
:is(.pillar-card, .drive-card, .value-card) { height: 100%; }
.pillar-card { min-height: 330px; }
.drive-card { min-height: 250px; }
.value-card { min-height: 230px; }

/* Long words and addresses wrap instead of pushing the page sideways */
:is(.nav-link, .dropdown-item, .footer-links a, .footer-contact-item,
    .address-details, .addon-text, .icon-item-content, .event-desc,
    .hero-headline, .hero-description, .page-banner h1) { overflow-wrap: anywhere; }

/* Focus is always visible for keyboard users */
:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }

/* Decorative layers never add page width */
:is(.laptop-glow, .module-nodes, .connection-svg, .slide, .slide-bg, .cta-orb) { max-width: 100vw; }

/* ==========================================================================
   RESPONSIVE FIXES
   ========================================================================== */

/* The page scrolls on <html>, so the guard belongs there too */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
body { overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }

/* The drawer and its controls, on tablets and phones */
@media (max-width: 900px) {
  .header-actions .nav-tools { width: 100%; flex-direction: column; align-items: stretch; gap: .6rem; }
  .header-actions .lang-wrap { width: 100%; }
  .header-actions .lang-btn { width: 100%; justify-content: space-between; }
  .header-actions .lang-panel {
    position: static; width: 100%; max-height: 50vh; margin-top: .5rem; box-shadow: none;
  }
  .header-actions .theme-btn { width: 100%; border-radius: 30px; }
  .nav-menu-wrapper { overflow-y: auto; }
}

/* Phones: the hero and its graphic need room to breathe */
@media (max-width: 575.98px) {
  .brand-name { font-size: .92rem !important; }
  .logo-badge { width: 34px !important; height: 34px !important; }
  .hero-headline { font-size: 1.75rem !important; }
  .page-banner h1 { font-size: 1.8rem !important; }
  .tagline-pill { font-size: .68rem !important; padding: 8px 16px !important; }
  .node { display: none; }            /* the floating module chips crowd a small screen */
  .connection-svg { opacity: .4; }
  .carousel-pagination { bottom: 1rem !important; }
  .container { padding-inline: 1.1rem !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* Smooth colour change only when the visitor flips the theme (not on page load) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim *, .tool-btn, .tool-caret { transition: none !important; }
}

/* ---------- Automatic translation: hide Google's own toolbar, tooltips and highlights ---------- */
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
#dg-gt { display: none !important; }
/* Google Translate pushes the page down by 40px for its own banner, and it
   REPLACES the <html> class attribute, so a rule relying only on our own
   class stops matching. These cover its classes as well, which is what
   kept a white strip showing above the hero in some languages. */
html.dg-auto body,
html.translated-ltr body,
html.translated-rtl body { top: 0 !important; position: static !important; }
.goog-text-highlight,
html.dg-auto font,
html.translated-ltr font,
html.translated-rtl font { background: none !important; box-shadow: none !important; }
/* Google flips the page right-to-left for Urdu/Arabic/Sindhi; keep the layout as designed */
html.translated-rtl body { direction: ltr; }

/* ---------- No English flash while a language is being applied ---------- */
html.dg-pending body { visibility: hidden; }
/* While the automatic translation fills the page in, the content is made
   invisible with opacity (not visibility), because the translator skips
   elements it considers hidden. */
html.dg-auto-wait body > *:not(#loader) { opacity: 0 !important; transition: none !important; }

/* The hidden block used for that one pass: on screen for the translator,
   invisible to the visitor, and removed as soon as it is done. */
#dg-prime {
  position: fixed;
  inset: 0;
  z-index: -1;            /* sits behind the page, so the visitor never sees it */
  overflow: hidden;
  pointer-events: none;
  font-size: 2px;         /* every line fits on one screen, so none is skipped */
  line-height: 1.05;
}

/* ==========================================================================
   TAGLINE CAPSULE
   The four taglines were one nowrap row inside a scrolling box, so on a phone
   about three quarters of it sat off-screen with no sign there was more. It
   now wraps onto as many lines as it needs and stays inside the page at every
   width. The dot separators are decorative, so they are dropped once it wraps.
   ========================================================================== */
.tagline-container { overflow: visible !important; }
.tagline-pill {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  white-space: normal !important;
  max-width: 100%;
  row-gap: 6px;
  column-gap: 10px;
  text-align: center;
}
.tagline-pill > span { white-space: nowrap; }

/* Below the two-column breakpoint it reads better as a centred block */
@media (max-width: 900px) {
  .tagline-pill { border-radius: 22px; padding: 12px 20px !important; }
}

/* On phones the separators go and each line stands on its own */
@media (max-width: 640px) {
  .tagline-pill .dot-sep { display: none; }
  .tagline-pill { gap: 4px 14px; font-size: .7rem !important; padding: 11px 18px !important; }
}

/* Very narrow: one tagline per line, so nothing is ever clipped */
@media (max-width: 420px) {
  .tagline-pill { flex-direction: column; align-items: center; gap: 5px; }
}

/* ==========================================================================
   NAVBAR FIT
   Six menu items plus the language and theme buttons need about 1210px in
   English, and about 1700px in a script such as Tamil - more than any screen
   gives once the logo is there. So the drawer takes over below 1280px for
   everyone, and at every width for the Indian and CJK scripts.
   ========================================================================== */
@media (max-width: 1279.98px) {
  .mobile-toggle { display: block !important; }
  .nav-menu-wrapper {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-dropdown, #0b1329);
    padding: 84px 1.4rem 2rem;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-y: auto;
    transition: right .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 99;
  }
  .nav-menu-wrapper.active { right: 0; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 1rem; width: 100%; }
  .nav-item { width: 100%; }
  .nav-link { width: 100%; justify-content: space-between; }
  .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding-left: 1rem !important; display: none; min-width: 0;
  }
  .nav-item.dropdown.active .dropdown-menu { display: block; }
  .header-actions {
    flex-direction: column; align-items: stretch; width: 100%;
    gap: 1rem; padding-top: 1.25rem; margin-top: auto;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, .15));
  }
  .header-actions .nav-tools { width: 100%; flex-direction: column; align-items: stretch; gap: .6rem; margin-inline: 0; }
  .header-actions .lang-wrap { width: 100%; }
  .header-actions .lang-btn { width: 100%; justify-content: space-between; }
  .header-actions .lang-panel { position: static; width: 100%; max-height: 50vh; margin-top: .5rem; box-shadow: none; }
  .header-actions .theme-btn { width: 100%; border-radius: 30px; }
  .lang-grid { grid-template-columns: 1fr; }
}

/* Wider scripts keep the drawer on desktop too, rather than overflowing. */
@media (min-width: 1280px) {
  html[data-script] .mobile-toggle { display: block !important; }
  html[data-script] .nav-menu-wrapper {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-dropdown, #0b1329);
    padding: 84px 1.4rem 2rem;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-y: auto;
    transition: right .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 99;
  }
  html[data-script] .nav-menu-wrapper.active { right: 0; }
  html[data-script] .nav-links { flex-direction: column; align-items: flex-start; gap: 1rem; width: 100%; }
  html[data-script] .nav-item { width: 100%; }
  html[data-script] .nav-link { width: 100%; justify-content: space-between; }
  html[data-script] .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding-left: 1rem !important; display: none; min-width: 0;
  }
  html[data-script] .nav-item.dropdown.active .dropdown-menu { display: block; }
  html[data-script] .header-actions {
    flex-direction: column; align-items: stretch; width: 100%;
    gap: 1rem; padding-top: 1.25rem; margin-top: auto;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, .15));
  }
  html[data-script] .header-actions .nav-tools { width: 100%; flex-direction: column; align-items: stretch; gap: .6rem; margin-inline: 0; }
  html[data-script] .header-actions .lang-wrap { width: 100%; }
  html[data-script] .header-actions .lang-btn { width: 100%; justify-content: space-between; }
  html[data-script] .header-actions .lang-panel { position: static; width: 100%; max-height: 50vh; margin-top: .5rem; box-shadow: none; }
  html[data-script] .header-actions .theme-btn { width: 100%; border-radius: 30px; }
  html[data-script] .lang-grid { grid-template-columns: 1fr; }
}

/* ---------- The logo gives way before the menu button does ----------
   The brand was holding its full width on a phone and pushing the menu button
   off the right edge, so it now shrinks and ellipsises instead. */
header { flex-wrap: nowrap; }
.brand-logo {
  min-width: 0;
  flex: 0 1 auto !important;
  overflow: hidden;
  max-width: calc(100% - 7rem);
}
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-badge { flex: 0 0 auto; }
.mobile-toggle { flex: 0 0 auto; margin-left: auto; }

/* The technology strip is a marquee: it scrolls inside its own frame rather
   than widening the page. */
.tech-section, .tech-slider-wrap { overflow: hidden; }

/* ==========================================================================
   BRAND LOCKUP
   The wordmark used to be one line of heavy capitals sitting level with the
   mark, so the two competed and the whole thing ran wide. It is now a proper
   lockup: the mark, a hairline rule, then the name over a quiet descriptor.
   Sentence case reads calmer and takes far less width, which matters because
   the name grows in other languages.
   ========================================================================== */
.brand-logo, .footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-right: .85rem;
  margin-right: .85rem;
  border-right: 1px solid var(--border-color, rgba(255, 255, 255, .18));
}
.brand-mark img { height: 36px !important; width: auto; display: block; }
.footer-brand-logo .brand-mark img { height: 36px !important; }

.brand-text { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; }

.brand-name {
  font-family: var(--font-heading, inherit);
  font-size: 1.06rem !important;
  font-weight: 750;
  letter-spacing: -.012em !important;
  text-transform: none !important;   /* the shouting capitals are gone */
  line-height: 1.15;
  color: var(--text-main, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-size: .605rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-logo:hover .brand-name { color: var(--primary, #2563eb); }
.brand-logo { transition: opacity .25s ease; }
.brand-logo:hover { opacity: .92; }

/* The descriptor is the first thing to go when space runs out */
@media (max-width: 420px) {
  .brand-sub { display: none; }
  .brand-mark { padding-right: .6rem; margin-right: .6rem; }
  .brand-name { font-size: .98rem !important; }
}
/* Indian and CJK names run longer, so they get a touch more room */
html[data-script] .brand-name { font-size: 1rem !important; letter-spacing: 0 !important; }
html[data-script] .brand-sub { letter-spacing: .1em; }

/* ==========================================================================
   OVERALL UI PASS
   Consistent rhythm, depth and motion across all seven pages.
   ========================================================================== */

/* Headings scale with the viewport instead of jumping at breakpoints */
.page-banner h1 { font-size: clamp(1.8rem, 4vw, 2.5rem) !important; }
:is(.section-title, .intro-title, .gallery-title, .process-header-title, .tech-title,
    .section-header-center h2, .hero-title-wrap h1) {
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  line-height: 1.25;
}
:is(.section-title, .intro-title, .gallery-title, .process-header-title, .tech-title) {
  letter-spacing: -.015em;
}

/* One shared card treatment, so nothing looks borrowed from another site */
:is(.pillar-card, .drive-card, .value-card, .gallery-card, .addon-row-card,
    .product-detail-card, .mosaic-card, .img-card, .info-card, .contact-form-card) {
  border-radius: 16px;
}
:is(.pillar-card, .drive-card, .addon-row-card, .gallery-card):hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(2, 12, 40, .18);
}

/* Buttons feel like one family */
:is(.btn-primary, .btn-secondary, .btn-know-more, .btn-submit, .map-open) {
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s, background-color .25s, color .25s;
}
:is(.btn-primary, .btn-submit, .map-open):hover { transform: translateY(-2px); }
:is(.btn-primary, .btn-secondary, .btn-know-more, .btn-submit):active { transform: translateY(0); }

/* Form fields: clearer focus, consistent rounding */
:is(.form-control, .lang-search, input[type="text"], input[type="email"], input[type="tel"], textarea) {
  border-radius: 10px !important;
}
:is(.form-control, input, textarea):focus {
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16) !important;
  outline: none;
}

/* A quieter, on-brand scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--primary, #2563eb); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* Footer breathes a little more and its links line up */
.footer-links a { display: inline-block; padding: 2px 0; }
.footer-contact-item { align-items: flex-start; }

/* Section rhythm: generous on desktop, tighter on a phone */
:is(.section-process, .feature-block, .gallery-section, .drives-section,
    .values-section, .about-hero-section, .tech-section) { padding-block: clamp(2.6rem, 6vw, 4.5rem) !important; }

/* ==========================================================================
   HISTORY SLIDES - keep the top of each photo
   The slides fill the screen with background-size: cover, which crops the
   image top and bottom equally. Anchoring to the top keeps heads, roofs and
   signage in frame; only the lower part is trimmed when the screen is wide.
   Set a slide's own focal point with  style="background-position: 50% 30%"
   on that .slide-bg if a particular photo wants it.
   ========================================================================== */
.slide-bg { background-position: center top !important; }
/* A tall phone crops much harder, so those sit a touch lower for balance */
@media (max-width: 767.98px) {
  .slide-bg { background-position: 50% 18% !important; }
}

/* ==========================================================================
   WHAT WE MARKET - richer layout
   The page was icons and text only, which read flat. Each pillar now opens
   with a picture, and each product sits beside a screen.

   TO USE YOUR OWN PICTURES: just overwrite the files in images/market/ with
   the same names. The sizes below are what they are cropped to, so matching
   them keeps everything sharp:
       pillar-enterprise.jpg / pillar-trader.jpg / pillar-consumer.jpg  800 x 500
       product-esathi.jpg / product-msathi.jpg                          900 x 560
   ========================================================================== */
.pillar-card { padding: 0 !important; overflow: hidden; text-align: left; }
.pillar-media {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--bg-subtle, #0f172a);
}
.pillar-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.pillar-card:hover .pillar-media img { transform: scale(1.06); }
/* a soft wash so the heading below always separates from the picture */
.pillar-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, var(--bg-card, #fff), transparent);
  opacity: .9;
}
/* the icon badge rides the seam between picture and text */
.pillar-card .pillar-icon-box {
  position: relative;
  margin: -34px 0 .9rem 1.6rem;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: var(--bg-card, #fff);
  box-shadow: 0 10px 24px rgba(2, 12, 40, .18);
  z-index: 2;
}
.pillar-card > div:not(.pillar-media) { padding: 0 1.6rem; }
.pillar-card h3 { margin-bottom: .45rem; }
.pillar-card p { margin-bottom: 1.1rem; }
.pillar-card .btn-know-more { margin: 0 1.6rem 1.6rem; align-self: flex-start; }
.pillar-card { display: flex; flex-direction: column; }
.pillar-card > div:not(.pillar-media) { flex: 1; }

/* ---------- Product card: text one side, screen the other ---------- */
.product-detail-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  align-items: center;
  overflow: hidden;
}
.product-media {
  order: 2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(2, 12, 40, .2);
  aspect-ratio: 45 / 28;
  background: var(--bg-subtle, #0f172a);
}
.product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-info-side { order: 1; max-width: none !important; }
.product-modules-grid { order: 3; grid-column: 1 / -1; }

@media (max-width: 900px) {
  .product-detail-card { grid-template-columns: 1fr; }
  .product-media { order: 1; }
  .product-info-side { order: 2; }
  .product-modules-grid { order: 3; }
}

/* ---------- Module pills: a little more life ---------- */
.module-icon-pill {
  border-radius: 14px !important;
  width: auto !important;
  min-height: 86px;
  gap: 2px;
}
.module-icon-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(2, 12, 40, .14);
}
.product-modules-grid { gap: 12px !important; }

/* ---------- Tabs look like tabs ---------- */
.tab-nav-btn { border-radius: 12px !important; font-weight: 650; }
.tab-nav-btn.active { box-shadow: 0 6px 16px rgba(37, 99, 235, .22); }

/* ---------- The three pillars keep equal height and a tidy grid ---------- */
.pillars-grid { gap: 22px; }
@media (max-width: 991.98px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pillars-grid { grid-template-columns: 1fr; } }
/* The badge and the button sit on the left, so the words line up with them
   instead of floating in the middle. */
.pillar-card,
.pillar-card :is(h3, p, div) { text-align: left !important; }
.pillar-card h3 { font-size: 1.12rem; }
.pillar-card p { font-size: .9rem; line-height: 1.6; }

/* Keep the text block and the screen the same height, so the card has no
   dead space under the paragraph. */
.product-detail-card { align-items: stretch !important; }
.product-info-side { display: flex; flex-direction: column; justify-content: center; }
.product-media { align-self: center; width: 100%; }
.product-brand-head { margin-bottom: .7rem; }
.product-logo-img { height: 34px; width: auto; }

/* ==========================================================================
   HISTORY TIMELINE RAIL
   On tablets and phones the years sit in a horizontal scroller, and whichever
   year met the edge was chopped through the middle of its digits. Now each
   year snaps to the centre, the ends fade instead of cutting, and nothing is
   ever half a number.
   ========================================================================== */
@media (max-width: 900px) {
  .timeline-years-list {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1.5rem;
    padding-inline: .35rem;
    scroll-behavior: smooth;
    /* the first and last 18px fade out, so a partly shown year reads as
       "there is more", not as a broken one */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .year-nav-item {
    scroll-snap-align: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* the active year must never be the one clipped */
  .year-nav-item.active { scroll-snap-align: center; }
}

/* The rail is tall on desktop; same treatment top and bottom there */
@media (min-width: 901px) {
  .timeline-years-list {
    scroll-snap-type: y proximity;
    scroll-padding-block: 1.2rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .year-nav-item { scroll-snap-align: center; }
}

/* ==========================================================================
   WHERE WE THRIVE - photos in place of icons
   The three "What It Feels Like" cards carry a picture now.
   Replace images/thrive/feel-1.jpg .. feel-3.jpg (480 x 480) with your own,
   and the mosaics and gallery with work-*, build-*, how-*, sports-*,
   leadership-*, festivals-*, outings-*, annual-* in the same folder.
   ========================================================================== */
.vibrant-icon-box.has-photo {
  width: 74px !important;
  height: 74px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  flex: 0 0 auto;
  background: none !important;
}
.vibrant-icon-box.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vibrant-card-item { align-items: center; gap: 1rem; }
.vibrant-card-item:hover .vibrant-icon-box.has-photo img { transform: scale(1.06); }
.vibrant-icon-box.has-photo img { transition: transform .45s cubic-bezier(.4, 0, .2, 1); }

/* The mosaics and gallery hold real files now, so they fill their frames */
.img-card img, .gallery-img-wrap img, .mosaic-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-card { overflow: hidden; }

/* ==========================================================================
   CONTACT PAGE
   Rebuilt to the layout you sent: heading and map on the left, a compact
   form on the right, then the address block.
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start; }
.contact-head { font-size: clamp(1.5rem, 2.8vw, 2.1rem) !important; font-weight: 800; margin-bottom: .7rem; }
.contact-sub { color: var(--text-muted, #64748b); font-size: .95rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 46rem; }

.map-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
  box-shadow: 0 10px 28px rgba(2, 12, 40, .12);
  aspect-ratio: 16 / 10;
  background: var(--bg-subtle, #f1f5f9);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.form-box { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
  background: var(--bg-card, #fff); box-shadow: 0 10px 28px rgba(2, 12, 40, .1); }
.form-box-head {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff; font-weight: 700; font-size: 1rem; padding: .9rem 1.25rem;
}
.form-box form { padding: 1.4rem 1.25rem 1.6rem; }
.form-box .form-group { margin-bottom: 1rem; }
.form-box .form-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.form-box .req { color: #dc2626; }
.form-box .form-control {
  width: 100%; padding: .6rem .75rem; font-size: .92rem;
  border: 1px solid var(--input-border, #cbd5e1); border-radius: 8px !important;
  background: var(--input-bg, #fff); color: var(--text-main, #0f172a);
}
.form-box textarea.form-control { resize: vertical; min-height: 118px; }
.form-box .btn-submit {
  display: inline-block;
  width: auto;
  background: #2563eb; color: #fff; border: 0; border-radius: 8px;
  padding: .6rem 1.5rem; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.form-box .btn-submit:hover { background: #1d4ed8; }
.form-note { margin-top: .8rem; font-size: .86rem; line-height: 1.55; display: none; }
.form-note.ok, .form-note.err { display: block; }
.form-note.ok { color: #047857; }
.form-note.err { color: #b91c1c; }

.touch-section { padding-block: clamp(2.4rem, 5vw, 4rem); background: var(--bg-subtle, #f8fafc); }
.touch-head { font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important; font-weight: 800; margin-bottom: 1.4rem; }
.touch-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border-color, rgba(0, 0, 0, .08));
  border-radius: 14px; padding: 1.8rem; box-shadow: 0 6px 20px rgba(2, 12, 40, .06);
}
.touch-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .9rem; }
.touch-card p { color: var(--text-muted, #64748b); font-size: .95rem; margin-bottom: .5rem; }
.touch-card a { color: var(--primary, #2563eb); font-weight: 600; text-decoration: none; }
.touch-card a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .map-frame { aspect-ratio: 4 / 3; }
}

/* "is-current" marks the section you are in. It is deliberately NOT the same
   class the script uses to open the menu, which is why those pages used to
   load with the dropdown already hanging open. */
.nav-item.dropdown.is-current > .nav-link { color: var(--primary, #2563eb); background: var(--tool-hover); }

/* ---------- Module tiles now carry logos instead of icon glyphs ----------
   Replace images/market/modules/*.png with your own (256 x 256, transparent
   background works on both themes):
     purchase.png  inventory.png  sales.png  hcms.png  accounts.png  timesathi.png
*/
.module-icon-pill .module-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  margin-bottom: 6px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.module-icon-pill:hover .module-logo { transform: scale(1.1); }