/* S-MAG styles: layered atop Framer's static structure.
   - Hide Framer's "Made in Framer" badge.
   - Reveal: hide [data-reveal] until animations.js mounts them.
   - Pill+arrow CTA hover/click.
   - Arrow icon contrast fix (Primary/Primary collision in reskin).
   - Mobile drawer menu (drawer DOM is injected by animations.js). */

#__framer-badge-container { display: none !important; }

html.smag-page-loading body {
  opacity: 0;
}

html.smag-page-ready body {
  opacity: 1;
  transition: opacity .32s ease;
}

html.smag-page-leaving body {
  opacity: 0;
  transition: opacity .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.smag-page-ready body,
  html.smag-page-leaving body {
    transition: none;
  }
}

/* Entered via a cross-document view transition: the transition overlay already
   crossfades the pages, so suppress the body fade. Without this the two stack
   and strobe (badly on Safari). Set by anim-init.js on the pagereveal event. */
html.smag-vt-entrance body {
  transition: none !important;
}

/* Smooth cross-document page transitions: the browser crossfades the old page
   into the new one instead of a white flash. Progressive enhancement: browsers
   without support just navigate normally. */
@view-transition { navigation: auto; }
/* The navbar is persistent chrome: name it so it is carried across the
   transition (stays put, no crossfade) rather than re-appearing each load. */
nav.framer-ur6jyi { view-transition-name: smag-nav; }

.motion-ready [data-reveal] { opacity: 0; }
/* Keep the persistent navbar visible at load; it must not re-run an entrance
   animation on every navigation (that was the "flicker then load" effect). */
.motion-ready [data-reveal="nav"] { opacity: 1 !important; }

/* Hero image flash fix: the hero photo is not painted at first paint (first
   paint is gated by CSS, not images), so the area used to flash white/grey
   until the photo popped in. Tint each hero wrapper with the photo's average
   colour so there is never a white gap, and fade the photo in over it
   (animations.js adds .smag-imgfade-in once the photo has loaded). */
.framer-176qp25 { background-color: rgb(128, 129, 121) !important; }   /* index hero */
.framer-5fqrd0  { background-color: rgb(129, 110, 92)  !important; }   /* about-us hero */
.framer-1v7v30q { background-color: rgb(131, 167, 145) !important; }   /* services hero */
.smag-imgfade { opacity: 0; }
.smag-imgfade.smag-imgfade-in { opacity: 1; transition: opacity .6s ease; }

/* Hero depth treatment.
   The hero image is a flattened render, so the foreground layer repeats
   the same image and clips it around the machinery. This lets the large
   manufacturer name sit visually behind the magnetic equipment. */
.framer-VLcRh .framer-wx6ri9 {
  isolation: isolate;
}

.framer-VLcRh .framer-1tels6l {
  z-index: 3 !important;
  top: 34% !important;
  left: 50% !important;
  max-width: min(1280px, 92vw) !important;
  place-content: center !important;
  pointer-events: none;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, .72) 72%, rgba(0, 0, 0, .38) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, .72) 72%, rgba(0, 0, 0, .38) 100%);
}

.framer-VLcRh .framer-1tels6l .framer-text {
  text-align: center;
}

/* Watermark font-size: Framer ships fixed 100 / 180 / 284 px, which
   overflow above 100% browser zoom. Override with a clamp() that
   scales fluidly with viewport so it survives zoom and small
   screens. white-space: nowrap belt-and-braces against the
   "Since 1978" token splitting if the   ever gets stripped. */
.framer-VLcRh .framer-1tels6l .framer-uffr94 p {
  font-size: clamp(2rem, 9vw, 14rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap;
}

.framer-VLcRh .framer-1nzah82 {
  z-index: 3;
}

/* Hero headline sizing. Framer ships 72 / 50 / 44px, which forces the
   two-sentence H1 (split by <br>) to wrap a second time into four lines.
   Scale the type down so each sentence holds a single line, giving two
   lines total, across all breakpoints. This is the desktop/base rule;
   tablet and phone are handled in their own media blocks below. */
.framer-VLcRh .framer-1nzah82 h1.framer-text {
  font-size: clamp(2.4rem, 3.2vw, 3rem) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Right-align the hero description and CTA so they read as one block
   flush to the right edge, mirroring the left-aligned headline on the
   opposite side. The subtitle wrapper is a flex column, so align-self
   moves the button on the cross axis. */
.framer-VLcRh .framer-n6r3t5 .framer-text {
  text-align: right !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
}

.framer-VLcRh .framer-12842m5 .framer-wv1qq7-container {
  align-self: flex-end;
}

/* The headline and the description/CTA share a centre-aligned row, so they
   sit at the same height. The hero is full-height with the cluster already
   near the bottom edge, so pushing the cluster down clips the CTA. The
   headline has empty space above it, so lift the headline instead: the
   right cluster then reads as sitting a little lower, with no clipping.
   Desktop and tablet only; phone stacks the cluster. */
@media (min-width: 810px) {
  /* The row and Main Contain default to overflow:clip at content height,
     so a lifted headline would be cut off at the top. Release the clip on
     just these two (not the subtitle box, which should keep clipping) so
     the headline can sit higher. */
  .framer-VLcRh .framer-1y3l9iz,
  .framer-VLcRh .framer-1nzah82 {
    overflow: visible !important;
  }

  .framer-VLcRh .framer-1i43vi {
    transform: translateY(-32px) !important;
  }
}

/* Stats band (the "Counter" row under the hero). The template shipped three
   invented stats (8000W+ / 25k+ / 99%); these are replaced in the markup with
   four document-backed ones (Since 1978, ISO 9001:2015, product range, the
   IndiaMART rating). Widen the grid from three to four columns on desktop and
   tablet, and stack two-by-two on phone so the columns never crush. */
.framer-VLcRh .framer-1gs2oua {
  grid-template-columns: repeat(4, minmax(50px, 1fr)) !important;
}

/* Framer shipped each counter div an inline transform:translateY(30px) as a
   pre-reveal rest-state, expecting its React runtime to animate it to zero. In
   this static export nothing clears it, and one label was left at
   transform:none, so it sat 30px higher than the rest and overlapped its
   number. Zero them all: the band's section-level reveal already animates the
   entrance, so these per-counter offsets are vestigial. */
.framer-VLcRh .framer-1gs2oua [data-framer-component-type="RichTextContainer"] {
  transform: none !important;
}

/* Each stat wrapper otherwise shrinks to the width of its number, so a narrow
   number ("40+") would crush its label onto two lines while a wide one stays
   single-line, reading ragged. Stretch every wrapper to fill its grid track so
   all four labels get the same room. */
.framer-VLcRh .framer-1gs2oua > div {
  justify-self: stretch !important;
  width: auto !important;
}

/* Framer pins the counter text to white-space:pre at content width, which
   would overflow the narrower four-up columns. Let only the labels wrap; the
   numbers stay on one line (kept short for exactly this reason). */
.framer-VLcRh .framer-1gs2oua .framer-1igl99h,
.framer-VLcRh .framer-1gs2oua .framer-1sej12b,
.framer-VLcRh .framer-1gs2oua .framer-16iflr8,
.framer-VLcRh .framer-1gs2oua h6.framer-text {
  width: 100% !important;
  white-space: normal !important;
}

@media (max-width: 809.98px) {
  .framer-VLcRh .framer-1gs2oua {
    grid-template-columns: repeat(2, minmax(50px, 1fr)) !important;
  }
}

/* About Us team grid: the template shipped six stock "experts"; Santosh
   Magnetic Works has two partners. Hide the four surplus card instances
   (Yeasmin, Yeaseen, Jesica, Ayash) by their Framer container classes, leaving
   Rahul and Sushil. Container classes are unique to about-us.html, so hiding
   them globally from the shared stylesheet is safe. */
.framer-mw20qg-container,
.framer-k9bii3-container,
.framer-1udlsfc-container,
.framer-1eedhwv-container {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * Static-export remediation
 *
 * This is a Framer export whose scroll-reveal and entrance animations
 * assume Framer's React runtime. Without it, content blocks freeze at
 * opacity:0 (white voids) and the leftover will-change layers make
 * scrolling janky. Make content visible by default and shed the layers.
 * ------------------------------------------------------------------ */

/* Defeat the reveal-hiding: any block tagged for scroll-in shows at rest.
   Beats Framer's inline opacity:0 and animations.js's rest state. */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Shed compositing layers. ~90 will-change hints per page exhaust the GPU
   and cause scroll jank on a static page that never animates them. */
[class*="framer-"] {
  will-change: auto !important;
}

/* About Us: hide two sections that are broken-blank in the static export and
   still carry energy-template content with no magnetic replacement, the
   scroll-pinned process section and the energy FAQ. */
.framer-npxb0u,
.framer-hx4zvr {
  display: none !important;
}

/* Team grid keeps three column tracks for the original six profiles, so the
   two partners left-align into the first two. Collapse to two content-width
   columns, centred. */
.framer-5bcce0 {
  grid-template-columns: repeat(2, minmax(0, 360px)) !important;
  grid-template-rows: auto !important;
  justify-content: center !important;
}

/* About Us hero banner uses the real team-under-signboard photo. The wide
   banner slot would centre-crop through the team's midriffs, so bias the cover
   crop upward to keep faces in frame. Scoped by src; this image is only used
   here. */
img[src="assets/factory-team.jpg"] {
  object-position: 50% 30% !important;
}

.smag-hero-depth-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 32px;
  overflow: hidden;
}

.smag-hero-depth-piece {
  position: absolute;
  inset: 0;
  background-image: url("hero.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.smag-depth-left {
  display: none;
}

.smag-depth-centre {
  display: none;
}

.smag-depth-base {
  display: none;
}

.smag-depth-right {
  display: none;
}

@media (min-width: 810px) and (max-width: 1439.98px) {
  .framer-VLcRh .framer-1tels6l {
    top: 32% !important;
    max-width: min(1040px, 94vw) !important;
  }

  /* On tablet the heading shares a row with the subtitle and only gets a
     ~400px column, so the type has to come down further to keep both
     sentences on a single line each without overrunning the subtitle. */
  .framer-VLcRh .framer-1nzah82 h1.framer-text {
    font-size: clamp(1.45rem, 3vw, 1.6rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 809.98px) {
  .framer-VLcRh .framer-1tels6l {
    top: 30% !important;
    max-width: 92vw !important;
  }

  .framer-VLcRh .framer-1nzah82 {
    transform: translateY(24px) !important;
  }

  .framer-VLcRh .framer-1tels6l .framer-uffr94 p {
    font-size: clamp(2.35rem, 11vw, 3.1rem) !important;
  }

  .framer-VLcRh .framer-1nzah82 h1.framer-text {
    font-size: clamp(1.2rem, 5.8vw, 1.45rem) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  .smag-hero-depth-piece {
    background-image: url("hero-mobile.jpg");
    background-position: center;
  }

}

/* Reskin token collision: Framer's send-icon inherits the Primary
   token for both fill and color, which is the same red as the Arrow
   circle background. Force a white-on-primary glyph. */
.framer-m76ur6 [data-framer-name="Arrow"] [data-framer-component-type="SVG"] {
  color: #fff !important;
  fill: #fff !important;
}

/* ------------------------------------------------------------------ *
 * Pill + arrow CTA
 *
 * Framer ships these as <a class="framer-m76ur6 ..."> with two children:
 *   1. .rolling-text-inner-XXX containing one <span> per letter.
 *      The wrapper has overflow:hidden, display:flex, and
 *      text-shadow: 0 var(--line-height-abs) 0 var(--text) which paints
 *      a clone of each glyph one line below. Hover slides each span up
 *      by one line-height: original exits, shadow-clone arrives in place.
 *   2. [data-framer-name="Arrow"], a 46x46 overflow:hidden circle with
 *      two stacked send-icon SVGs. SVG A is centred; SVG B is offset by
 *      (-24, +25). Translating the shared wrapper by (+24, -25) on hover
 *      sends A out the top-right and B into centre.
 * ------------------------------------------------------------------ */

.framer-m76ur6 {
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.25, 1, .5, 1);
}

.framer-m76ur6 [class*="rolling-text-inner-"] > span {
  transition: transform 430ms cubic-bezier(.25, 1, .5, 1);
  transition-delay: calc(var(--smag-i, 0) * 32ms);
  will-change: transform;
}

/* !important is required: Framer sets `transform:none` inline on every
   letter span, which has higher specificity than any CSS selector. */
.framer-m76ur6:hover [class*="rolling-text-inner-"] > span,
.framer-m76ur6:focus-visible [class*="rolling-text-inner-"] > span {
  transform: translateY(-1.2em) !important;
}

.framer-m76ur6 [data-framer-name="Arrow"] > [data-framer-name="vuesax/linear/send"] {
  transition: transform 430ms cubic-bezier(.25, 1, .5, 1);
  will-change: transform;
}

.framer-m76ur6:hover [data-framer-name="Arrow"] > [data-framer-name="vuesax/linear/send"],
.framer-m76ur6:focus-visible [data-framer-name="Arrow"] > [data-framer-name="vuesax/linear/send"] {
  transform: translate(24px, -25px);
}

.framer-m76ur6:active {
  transform: scale(0.97);
  transition-duration: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .framer-m76ur6,
  .framer-m76ur6 [class*="rolling-text-inner-"] > span,
  .framer-m76ur6 [data-framer-name="Arrow"] > [data-framer-name="vuesax/linear/send"] {
    transition: none;
  }
  .framer-m76ur6:hover [class*="rolling-text-inner-"] > span,
  .framer-m76ur6:focus-visible [class*="rolling-text-inner-"] > span {
    transform: none !important;
  }
  .framer-m76ur6:hover [data-framer-name="Arrow"] > [data-framer-name="vuesax/linear/send"],
  .framer-m76ur6:focus-visible [data-framer-name="Arrow"] > [data-framer-name="vuesax/linear/send"],
  .framer-m76ur6:active {
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Mobile drawer menu
 *
 * Replaces Framer's mobile menu which depended on the React runtime.
 * The drawer DOM is injected by animations.js and the menu button
 * is bound there too; this is purely presentation.
 * ------------------------------------------------------------------ */

#smag-mm {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #fff;
  display: none;
  flex-direction: column;
  padding: 88px 28px 28px;
  gap: 2px;
}

#smag-mm.open { display: flex; }

#smag-mm a {
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.03em;
  color: #0a0a0a;
  text-decoration: none;
  padding: 16px 2px;
  border-bottom: 1px solid #ededed;
}

#smag-mm a:active { color: #e8231a; }

#smag-mm-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 32px;
  line-height: 1;
  color: #0a0a0a;
  cursor: pointer;
}

@media (min-width: 810px) {
  #smag-mm { display: none !important; }
}

/* Framer's mobile-layout Overlay sits above the navbar and intercepts
   clicks on the Menu Button. Disable pointer events on the overlay so
   the button receives them. */
@media (max-width: 809.98px) {
  [data-framer-name="Overlay"] { pointer-events: none !important; }
}

/* Contact form: Framer exports honeypot spam fields with only transform:scale(0).
   Some browsers still paint a tiny native input box, so fully remove them from
   visual layout while keeping the real fields intact. */
.framer-AydYc form input[aria-hidden="true"][data-form-type="other"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------------ *
 * Benefits section
 *
 * The exported percentage gauge clips inside the industrial benefits card.
 * Replace it with a SMAG-specific matched-circuit graphic and tighten headings.
 * ------------------------------------------------------------------ */

#benifit .framer-8qvgsd {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

#benifit .framer-8qvgsd .framer-140o1q3 {
  display: none !important;
}

#benifit .framer-8qvgsd .framer-1xqnjxx,
#benifit .framer-8qvgsd .framer-1vgecn3,
#benifit .framer-8qvgsd .framer-10aaajs {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  transform: none !important;
}

#benifit .framer-8qvgsd .framer-1xqnjxx {
  align-items: center !important;
  gap: 16px !important;
}

#benifit .framer-8qvgsd .framer-nwjfqe,
#benifit .framer-8qvgsd .framer-nwjfqe h5 {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

#benifit .framer-8qvgsd .framer-1vgecn3 {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: clamp(12px, 1.4vw, 20px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

#benifit .framer-8qvgsd .framer-1vgecn3::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: clamp(122px, 12vw, 176px) !important;
  background: url("matched-magnet-circuit.svg?v=2") center / contain no-repeat !important;
}

#benifit .framer-8qvgsd .framer-1vgecn3::after {
  content: none !important;
}

#benifit .framer-8qvgsd .framer-1ixr6oi,
#benifit .framer-8qvgsd .framer-182l8b4 {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
}

#benifit .framer-8qvgsd .framer-1ixr6oi {
  display: none !important;
}

#benifit .framer-8qvgsd .framer-182l8b4 {
  display: none !important;
}

#benifit .framer-8qvgsd .framer-10aaajs {
  flex: 0 0 auto !important;
  margin-top: clamp(28px, 2.5vw, 40px) !important;
}

#benifit .framer-8qvgsd .framer-10aaajs p {
  white-space: normal !important;
  overflow-wrap: normal !important;
  font-size: clamp(17px, 1.25vw, 20px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 809.98px) {
  #benifit .framer-8qvgsd .framer-1vgecn3 {
    margin-top: 28px !important;
    min-height: 108px !important;
  }

  #benifit .framer-8qvgsd .framer-nwjfqe h5 {
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

/* ------------------------------------------------------------------ *
 * Product families section
 *
 * The source Framer layout was tuned for short renewable-energy cards.
 * SMAG product names and descriptions need a steadier industrial grid:
 * no clipped headings, no staggered card offsets, and equal-height cards.
 * ------------------------------------------------------------------ */

#benifit-1,
#benifit-1 .framer-4gtwfq,
#benifit-1 .framer-16xhbi3,
#benifit-1 .framer-72nwhk,
#benifit-1 .framer-41y4vv,
#benifit-1 .framer-v6remb,
#benifit-1 .framer-179itf5 {
  overflow: visible !important;
}

#benifit-1 {
  scroll-margin-top: 120px !important;
}

#benifit-1 .framer-4gtwfq {
  gap: clamp(36px, 4vw, 60px) !important;
}

#benifit-1 .framer-16xhbi3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) !important;
  align-items: start !important;
  column-gap: clamp(48px, 8vw, 120px) !important;
  row-gap: 28px !important;
  height: auto !important;
}

#benifit-1 .framer-72nwhk {
  display: contents !important;
}

#benifit-1 .framer-41y4vv,
#benifit-1 .framer-6zd2vl {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  transform: none !important;
}

#benifit-1 .framer-41y4vv {
  grid-column: 1 !important;
  min-height: 1.25em !important;
  padding-bottom: 14px !important;
}

#benifit-1 .framer-6zd2vl {
  grid-column: 2 !important;
  padding-top: 10px !important;
}

#benifit-1 .framer-41y4vv h2 {
  font-size: clamp(48px, 4.2vw, 72px) !important;
  line-height: 1.14 !important;
  max-width: 780px !important;
  white-space: normal !important;
}

#benifit-1 .framer-6zd2vl p {
  font-size: clamp(18px, 1.3vw, 24px) !important;
  line-height: 1.55 !important;
  max-width: 600px !important;
}

#benifit-1 .framer-v6remb {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

#benifit-1 .framer-179itf5 {
  width: 100% !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

#benifit-1 .framer-1faa9ry,
#benifit-1 .framer-19cvw77,
#benifit-1 .framer-3h7pth,
#benifit-1 .framer-ib9i7h {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 360px !important;
  height: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-rows: 56px 70px 1fr !important;
  align-items: start !important;
  row-gap: 0 !important;
  padding: clamp(32px, 2.5vw, 44px) !important;
}

#benifit-1 .framer-1faa9ry > *,
#benifit-1 .framer-19cvw77 > *,
#benifit-1 .framer-3h7pth > *,
#benifit-1 .framer-ib9i7h > * {
  position: relative !important;
  inset: auto !important;
}

#benifit-1 .framer-17o0bye,
#benifit-1 .framer-1v6re9q,
#benifit-1 .framer-h6bol8,
#benifit-1 .framer-901eu1,
#benifit-1 .framer-1xjbe52 {
  display: contents !important;
  height: auto !important;
  min-height: 0 !important;
}

#benifit-1 .framer-1hnyheg,
#benifit-1 .framer-11tbb7o,
#benifit-1 .framer-1qnn7pc,
#benifit-1 .framer-lo5cqk {
  grid-row: 1 !important;
  width: 48px !important;
  height: 48px !important;
  align-self: start !important;
}

#benifit-1 .framer-r8dlhl,
#benifit-1 .framer-2o3cje,
#benifit-1 .framer-1owtgy5,
#benifit-1 .framer-6560x4 {
  width: 48px !important;
  height: 48px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 24px 24px !important;
}

#benifit-1 .framer-r8dlhl {
  background-image: url("product-separator.svg") !important;
}

#benifit-1 .framer-2o3cje {
  background-image: url("product-lifter.svg") !important;
}

#benifit-1 .framer-1owtgy5 {
  background-image: url("product-chuck.svg") !important;
}

#benifit-1 .framer-6560x4 {
  background-image: url("product-filter.svg") !important;
}

#benifit-1 .framer-r8dlhl img,
#benifit-1 .framer-2o3cje img,
#benifit-1 .framer-1owtgy5 img,
#benifit-1 .framer-6560x4 img {
  opacity: 0 !important;
}

#benifit-1 .framer-v6ejtb h5,
#benifit-1 .framer-1lieo2x h5,
#benifit-1 .framer-1z090yv h5,
#benifit-1 .framer-12q5djd h5 {
  height: auto !important;
  min-height: 0 !important;
  font-size: clamp(21px, 1.38vw, 25px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

#benifit-1 .framer-v6ejtb,
#benifit-1 .framer-1lieo2x,
#benifit-1 .framer-1z090yv,
#benifit-1 .framer-12q5djd {
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: start !important;
  display: block !important;
}

#benifit-1 .framer-5ddho3,
#benifit-1 .framer-1789k13,
#benifit-1 .framer-1o415o,
#benifit-1 .framer-1iizkwa {
  grid-row: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
}

#benifit-1 .framer-5ddho3 p,
#benifit-1 .framer-1789k13 p,
#benifit-1 .framer-1o415o p,
#benifit-1 .framer-1iizkwa p {
  height: auto !important;
  min-height: 0 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 810px) and (max-width: 1439.98px) {
  #benifit-1 .framer-16xhbi3 {
    grid-template-columns: 1fr !important;
  }

  #benifit-1 .framer-41y4vv,
  #benifit-1 .framer-6zd2vl {
    grid-column: 1 !important;
    text-align: center !important;
  }

  #benifit-1 .framer-41y4vv h2,
  #benifit-1 .framer-6zd2vl p {
    margin-inline: auto !important;
    text-align: center !important;
  }

  #benifit-1 .framer-179itf5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 809.98px) {
  #benifit-1 .framer-16xhbi3,
  #benifit-1 .framer-179itf5 {
    grid-template-columns: 1fr !important;
  }

  #benifit-1 .framer-41y4vv,
  #benifit-1 .framer-6zd2vl {
    grid-column: 1 !important;
  }

  #benifit-1 .framer-41y4vv h2 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  #benifit-1 .framer-1faa9ry,
  #benifit-1 .framer-19cvw77,
  #benifit-1 .framer-3h7pth,
  #benifit-1 .framer-ib9i7h {
    min-height: 300px !important;
  }
}

/* Keep this after responsive product-family rules. Framer writes an inline
   translateY(30px) to the second card during reveal, which breaks the row. */
#benifit-1 .framer-19cvw77[style*="translateY"] {
  transform: none !important;
}

/* Section trim: hide the exported renewable-energy project cards until SMAG
   has real applications or project references to show. */
#our-projects {
  display: none !important;
}

/* Client logo ticker: remove the exported capsule brackets around each logo,
   but keep a fine red separator between marks. */
.framer-1phiz6o .ticker-item {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.framer-1phiz6o .ticker-item::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -15px;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(232, 35, 26, 0.32) 50%, transparent);
}

/* Shared call-to-action band ("Need the right magnet for the job?"). It relied
   on a Framer CDN background image (old EcoPower wind turbines) that is
   unreliable and off-brand. Give it a solid brand background so the heading is
   always legible. Key the rule on the structural "Heading+Button" layer, not on
   a specific heading wording, so it applies to every CTA banner (home, about,
   contact) regardless of the copy in the heading. */
[data-framer-name="Images"]:has([data-framer-name="Heading+Button"]) {
  background-color: #e8231a !important;
  border-radius: 24px;
  padding: 8px;
}
[data-framer-name="Images"]:has([data-framer-name="Heading+Button"]) img {
  display: none !important;
}

/* Remove the leftover empty template background-video banner that sat between
   the services section and the call-to-action, leaving a large blank gap. */
#projects { display: none !important; }

/* Service and product-family cards: drop the broken 9px "Ellipse" icon dot and
   centre the content so the title and text group cleanly instead of floating. */
#services [data-framer-name="Ellipse 51"], #benifit-1 [data-framer-name="Ellipse 51"],
#services .framer-awv0im, #benifit-1 .framer-awv0im { display: none !important; }
#services .framer-ljkzq1 { justify-content: center !important; gap: 10px !important; overflow: visible !important; }


/* Service cards: one uniform, attached grid. The cells snap together as a
   rounded, bordered panel separated by hairlines (1px gaps over the grid's
   own background), with equal-height cells and a small brand accent above each
   title. */
/* The services grid uses Framer's generated class hash on the home page. */
#services .framer-3moqhw, #services .framer-1uawz3h {
  gap: 1px !important;
  background: rgba(20, 20, 20, 0.1) !important;
  border: 1px solid rgba(20, 20, 20, 0.1) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  grid-template-rows: 1fr 1fr !important;   /* equal rows that grow to fit the icon */
}
/* Make every cell fill its (equal-height) row so the panel is uniform: the
   grid-item container and the card both stretch to the full cell height. */
#services .framer-3moqhw [class*="-container"],
#services .framer-1uawz3h [class*="-container"] { height: 100% !important; }
#services .framer-1wr54ol { gap: 14px !important; }
#services .framer-12rgd66 {
  background: #ffffff !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding: 32px !important;
}
#services .framer-1neyqa6 .framer-text { transition: color .3s ease; }

/* Service-card animated icons (injected by animations.js): line-art icons that
   morph and recolour on card hover and play a confirm (check + ring pulse) on
   click. */
.smag-svc-icon {
  position: relative; display: inline-flex; flex: none;
  width: 38px; height: 38px; margin-bottom: 16px;
  color: #1f1f1f; cursor: pointer; transition: color .45s ease;
}
.smag-svc-icon svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.smag-svc-icon .smag-ic { transition: opacity .25s ease, transform .25s ease; }
.smag-svc-icon .smag-ic * {
  transition: transform .55s cubic-bezier(.16,1,.3,1), stroke-dashoffset .55s ease, opacity .4s ease;
  transform-box: fill-box; transform-origin: center;
}
.smag-svc-icon .smag-ic-draw { stroke-dasharray: 26; stroke-dashoffset: 26; opacity: 0; }
/* a stroke that is visible by default and re-draws itself on hover */
.smag-ic-redraw { stroke-dasharray: 26; stroke-dashoffset: 0; }
#services .framer-12rgd66:hover .smag-ic-redraw { animation: smag-redraw 1.15s cubic-bezier(.4, 0, .2, 1); }
@keyframes smag-redraw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
/* pivot the needle at the gauge hub (path start), beating the generic
   .smag-ic * { transform-origin: center } rule so it does not detach */
.smag-svc-icon .smag-needle { transform-origin: 0% 100% !important; }
/* hover: recolour and morph (scoped to the service cards) */
#services .framer-12rgd66:hover .smag-svc-icon { color: #e8231a; }
#services .framer-12rgd66:hover .smag-ic-draw { stroke-dashoffset: 0; opacity: 1; }
#services .framer-12rgd66:hover .smag-lyr-top { transform: translateY(-3px); }
#services .framer-12rgd66:hover .smag-gear { transform: rotate(55deg); }
#services .framer-12rgd66:hover .smag-truck { transform: translateX(2.2px); }
#services .framer-12rgd66:hover .smag-needle { transform: rotate(-42deg); }
/* click confirm: hide the icon, draw a check, pulse a ring */
.smag-ic-confirm { opacity: 0; }
.smag-ic-confirm .smag-confirm-check { stroke: #e8231a; stroke-width: 2.4; stroke-dasharray: 26; stroke-dashoffset: 26; }
.smag-svc-icon.smag-confirm { color: #e8231a; }
.smag-svc-icon.smag-confirm .smag-ic { opacity: 0; transform: scale(.6); }
.smag-svc-icon.smag-confirm .smag-ic-confirm { opacity: 1; }
.smag-svc-icon.smag-confirm .smag-confirm-check { animation: smag-draw .45s .05s cubic-bezier(.16,1,.3,1) forwards; }
.smag-svc-icon::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid #e8231a; opacity: 0; transform: scale(.55); pointer-events: none;
}
.smag-svc-icon.smag-confirm::after { animation: smag-ring .6s ease forwards; }
@keyframes smag-draw { to { stroke-dashoffset: 0; } }
@keyframes smag-ring { 0% { opacity: .5; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .smag-svc-icon, .smag-svc-icon * { transition: none !important; }
  .smag-svc-icon.smag-confirm .smag-confirm-check, .smag-svc-icon.smag-confirm::after,
  #services .framer-12rgd66:hover .smag-ic-redraw { animation: none !important; }
}


/* Bento section polish ------------------------------------------------------ */

/* Template icon badges normalised site-wide (classes applied by animations.js):
   the teal glyph PNG becomes charcoal, and the pink (brand-red @20%) circle
   becomes a clean white badge with a hairline so it reads on white cards. */
.smag-iconglyph { filter: brightness(0) !important; }
.smag-iconbadge {
  background: #ffffff !important;
  border: 1px solid rgba(20, 20, 20, 0.08) !important;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05) !important;
}

/* Proven Workshop photo tile: dark scrim top and bottom so the overlaid text
   is legible, plus a text shadow as a safety net. */
#benifit .framer-1yw2d8l::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 44%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.88) 100%);
}
#benifit .framer-1yw2d8l img[src="assets/proven-40-workshop.jpg"] {
  object-position: 52% 42% !important;
}
@media (min-width: 1440px) {
  #benifit .framer-1yw2d8l img[src="assets/proven-40-workshop.jpg"] {
    object-position: 54% 42% !important;
  }
}
@media (max-width: 809.98px) {
  #benifit .framer-1yw2d8l img[src="assets/proven-40-workshop.jpg"] {
    object-position: 50% 38% !important;
  }
}
#benifit .framer-1yw2d8l .framer-text { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
/* ISO 9001 mark: kill the gradient fade that was clipping the final digit. */
#benifit .framer-1yw2d8l [data-text-fill] {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  background-image: none !important;
}

/* Micro-interactions: gentle hover lift on the bento cards. The wrapper rows
   are overflow:clip, which sliced the lifted card's soft shadow into a hard
   edge; let the shadow spill out of them. */
#benifit .framer-15c7ota, #benifit .framer-5at6j7 { overflow: visible !important; }
#benifit .framer-zifv6d, #benifit .framer-8qvgsd, #benifit .framer-qq6gqa, #benifit .framer-1yw2d8l {
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease !important;
}
#benifit .framer-zifv6d:hover, #benifit .framer-8qvgsd:hover, #benifit .framer-qq6gqa:hover, #benifit .framer-1yw2d8l:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.12) !important;
}
/* Attached service cells: tint and redden the title on hover. No lift, so the
   grid seams stay intact (the per-service icon animates alongside). */
#services .framer-12rgd66 { transition: background-color .3s ease !important; }
#services .framer-12rgd66:hover { background-color: rgba(232, 35, 26, 0.05) !important; }
#services .framer-12rgd66:hover .framer-1neyqa6 .framer-text { color: #e8231a !important; }
@media (prefers-reduced-motion: reduce) {
  #benifit .framer-zifv6d, #benifit .framer-8qvgsd, #benifit .framer-qq6gqa, #benifit .framer-1yw2d8l,
  #services .framer-12rgd66, #services .framer-1neyqa6 .framer-text { transition: none !important; }
}

/* Liquid-glass pill navbar: a floating frosted pill that hugs its content,
   stays above everything and gently deepens once scrolled. The nav element
   already carries the pill radius; the square wrapper keeps it fixed and centred. */
[data-framer-name="Navbar"] { z-index: 200 !important; top: 14px !important; }
nav.framer-ur6jyi {
  width: fit-content !important;
  max-width: calc(100vw - 28px) !important;
  margin: 0 auto !important;
  padding: 0 14px 0 30px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 12px 34px rgba(20, 20, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  height: 68px !important;
  transition: background .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.16,1,.3,1) !important;
}
[data-framer-name="Navbar"].smag-nav-scrolled nav.framer-ur6jyi {
  background: rgba(255, 255, 255, 0.66) !important;
  box-shadow: 0 14px 40px rgba(20, 20, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
/* collapse the full-width container so the three groups sit together, centred,
   with breathing room instead of being flung to the glass edges */
nav.framer-ur6jyi .framer-af31sf,
nav.framer-ur6jyi .framer-2pc77y { width: auto !important; }
nav.framer-ur6jyi .framer-2pc77y {
  justify-content: center !important;
  gap: clamp(28px, 5vw, 64px) !important;
}
/* merge the inner links pill into the glass so it reads as one clean surface */
.framer-p4v845 { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; gap: 6px !important; }

/* Joyful nav links: each link gets a soft pill that warms to brand red and lifts
   on hover, so the bar feels alive rather than flat. */
.framer-p4v845 .framer-129fhqs {
  border-radius: 360px !important;
  padding: 7px 14px !important;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .25s ease !important;
}
.framer-p4v845 .framer-129fhqs .framer-text {
  transition: color .25s ease !important;
}
.framer-p4v845 .framer-129fhqs:hover {
  background-color: rgba(232, 35, 26, 0.09) !important;
  transform: translateY(-1px) !important;
}
.framer-p4v845 .framer-129fhqs:hover .framer-text {
  color: var(--token-17b3b986-fda4-4a7f-9831-ce6e70e545fb, rgb(232, 35, 26)) !important;
}
/* Logo: a gentle nudge on hover */
.framer-1ozs3r7 { transition: transform .3s cubic-bezier(.16,1,.3,1) !important; }
.framer-1ozs3r7:hover { transform: scale(1.04) !important; }
/* Contact button: lift and brighten the whole pill on hover */
nav.framer-ur6jyi .framer-nb922b a {
  transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease, box-shadow .25s ease !important;
}
nav.framer-ur6jyi .framer-nb922b a:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 8px 20px rgba(232, 35, 26, 0.32) !important;
}
#cta .framer-YHHwL .framer-the1i2,
#cta .framer-YHHwL .framer-1lzkxbs {
  background-color: #fff !important;
}
#cta .framer-YHHwL [class*="rolling-text-inner-"] {
  --text: var(--token-17b3b986-fda4-4a7f-9831-ce6e70e545fb, #e8231a) !important;
  text-shadow: 0 var(--line-height-abs) 0 var(--text) !important;
}
#cta .framer-YHHwL .framer-the1i2 span {
  color: var(--token-17b3b986-fda4-4a7f-9831-ce6e70e545fb, #e8231a) !important;
}
#cta .framer-YHHwL .framer-1lzkxbs [data-framer-name="vuesax/linear/send"] {
  color: var(--token-17b3b986-fda4-4a7f-9831-ce6e70e545fb, #e8231a) !important;
  fill: currentColor !important;
}
#cta .framer-YHHwL .framer-1lzkxbs use {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
#cta .framer-YHHwL .framer-1lzkxbs svg {
  filter: brightness(0) saturate(100%) invert(25%) sepia(94%) saturate(3444%) hue-rotate(353deg) brightness(97%) contrast(89%) !important;
}
#cta .framer-YHHwL .framer-1lzkxbs svg path {
  stroke: var(--token-17b3b986-fda4-4a7f-9831-ce6e70e545fb, #e8231a) !important;
}
@media (prefers-reduced-motion: reduce) {
  nav.framer-ur6jyi, .framer-p4v845 .framer-129fhqs, .framer-1ozs3r7,
  nav.framer-ur6jyi .framer-nb922b a { transition: none !important; }
}

/* Product-family interactive tiles: cursor-tracking 3D tilt, a "View products"
   affordance, and a prominent catalogue CTA below the row. */
#benifit-1 .smag-tilt {
  position: relative !important;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease !important;
  will-change: transform;
}
#benifit-1 .smag-tilt:hover {
  box-shadow: 0 22px 46px rgba(20, 20, 20, 0.16) !important;
}
.smag-fam-cta {
  position: absolute; left: 28px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Satoshi","Satoshi Placeholder",sans-serif;
  font-weight: 700; font-size: 14px; color: #e8231a; pointer-events: none;
}
.smag-fam-cta span { transition: transform .2s ease; }
.smag-tilt:hover .smag-fam-cta span { transform: translateX(5px); }
.smag-fam-bottomcta {
  display: flex; width: max-content; max-width: 92%;
  margin: 44px auto 0; align-self: center; align-items: center; gap: 10px;
  background: #e8231a; color: #fff;
  font-family: "Satoshi","Satoshi Placeholder",sans-serif;
  font-weight: 700; font-size: 16px;
  padding: 16px 32px; border-radius: 999px; text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.smag-fam-bottomcta:hover { background: #c71d14; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(232,35,26,.28); }
.smag-fam-bottomcta span { transition: transform .2s ease; }
.smag-fam-bottomcta:hover span { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  #benifit-1 .smag-tilt { transition: none !important; }
}

/* ------------------------------------------------------------------ *
 * Footer (rewritten clean + responsive, replacing the Framer block)
 * ------------------------------------------------------------------ */
.smag-footer {
  width: 100%;
  align-self: stretch;
  padding: 0 clamp(8px, 2vw, 24px) clamp(8px, 2vw, 24px);
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
}
.smag-footer-inner {
  position: relative;
  overflow: hidden;
  max-width: 1360px;
  margin: 0 auto;
  background: #f4f4f5;
  color: #1f1f24;
  border: 1px solid rgba(20, 20, 20, 0.07);
  border-radius: 26px;
  padding: clamp(36px, 5vw, 68px) clamp(24px, 4vw, 60px) 0;
}
.smag-footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.6fr;
  gap: clamp(28px, 3.5vw, 56px);
  padding-bottom: clamp(36px, 4.5vw, 60px);
}
.smag-footer-brand { max-width: 320px; }
.smag-footer-logo { display: inline-block; }
.smag-footer-logo img { height: 40px; width: auto; display: block; }
.smag-footer-blurb { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: #56565c; }
.smag-footer-iso { margin: 12px 0 0; font-size: 13px; color: #8a8a90; }
.smag-footer-gstin { margin: 6px 0 0; font-size: 13px; color: #8a8a90; letter-spacing: 0.02em; }
.smag-footer-h {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8231a;
}
.smag-footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.smag-footer-col a {
  color: #36363c;
  text-decoration: none;
  transition: color 0.2s ease;
  width: fit-content;
}
.smag-footer-col a:hover { color: #e8231a; }
.smag-footer-col a[data-framer-page-link-current="true"] { color: #e8231a; }
.smag-footer-contact { display: flex; align-items: flex-start; gap: 10px; }
.smag-footer-ico {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.smag-footer-address { line-height: 1.55; max-width: 300px; }
.smag-footer-phones { display: flex; flex-direction: column; gap: 5px; }
.smag-footer-watermark {
  position: relative;
  z-index: 0;
  text-align: center;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(72px, 18vw, 268px);
  line-height: 0.78;
  margin-bottom: -0.04em;
  background: linear-gradient(180deg, rgba(232, 35, 26, 0.20) 0%, rgba(232, 35, 26, 0) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.smag-footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0 26px;
  text-align: center;
  font-size: 13px;
  color: #8a8a90;
}
.smag-footer-bottom a { color: #56565c; text-decoration: none; transition: color 0.2s ease; }
.smag-footer-bottom a:hover { color: #e8231a; }
.framer-4v1nxj { display: none !important; }
@media (max-width: 900px) {
  .smag-footer-grid { grid-template-columns: 1fr 1fr; }
  .smag-footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .smag-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Leadership section (hand-built) ───────────────────────────────────────
   The two leadership headshots (Rahul Ingle, Sushil Ingle) previously sat,
   mislabelled, inside the "What stays under our control" strengths grid. They
   now live in their own block with names, roles and an animated red sweep
   border that rotates around the image on hover. */
.smag-leadership { max-width: 1360px; margin: 0 auto; padding: 88px 40px; }
.smag-lead-head { text-align: center; margin-bottom: 48px; }
.smag-lead-eyebrow { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #e8231a; font-weight: 600; font-size: 13px; margin: 0 0 14px; }
.smag-lead-title { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -.03em; color: #111; margin: 0; }
.smag-lead-grid { display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; }
.smag-lead-card { margin: 0; width: min(340px, 100%); }
.smag-lead-photo { position: relative; border-radius: 18px; padding: 4px; transition: transform .35s ease; }
.smag-lead-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.smag-lead-photo::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 4px;
  background: conic-gradient(from var(--smag-sweep, 0deg), #e8231a 0deg, #ff6a5e 50deg, transparent 130deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.smag-lead-card:hover .smag-lead-photo { transform: translateY(-6px); }
.smag-lead-card:hover .smag-lead-photo::before { opacity: 1; animation: smag-sweep 2.4s linear infinite; }
.smag-lead-info { display: flex; flex-direction: column; gap: 3px; padding: 18px 4px 0; }
.smag-lead-name { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: #111; }
.smag-lead-role { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #e8231a; }
@property --smag-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes smag-sweep { to { --smag-sweep: 360deg; } }
@media (max-width: 600px) { .smag-leadership { padding: 56px 20px; } .smag-lead-grid { gap: 22px; } .smag-lead-card { width: min(300px, 100%); } }
@media (prefers-reduced-motion: reduce) { .smag-lead-card:hover .smag-lead-photo::before { animation: none; } }

/* ── About page corrections (responsive QA) ───────────────────────────────
   1) Section order: on the mobile layout variant the footer and the inserted
      leadership block both computed order:0, so they rendered with the intro
      (order 0) ahead of why-buyers (1), strengths (3) and the CTA (5). Give
      leadership order 4 (between strengths and CTA) and pin the footer last.
   2) Leadership photos were 4:5 at full card width: too tall. Make them square
      and smaller, two-up on phones.
   3) Strength cards (#team) shipped leftover stock/energy photos. Drop the
      photos and present clean icon + text cards. */
.smag-leadership { order: 4; }
.framer-1spiafk-container { order: 5; } /* CTA banner: kept Framer's default order 0 and floated up next to the hero; pin it after leadership */
footer.smag-footer { order: 2000; }

.smag-lead-card { width: min(248px, 100%); }
.smag-lead-photo img { aspect-ratio: 1 / 1; }
@media (max-width: 600px) {
  .smag-lead-grid { gap: 16px; }
  .smag-lead-card { width: calc(50% - 8px); max-width: 220px; }
}

/* Strengths: hide the leftover photo block, lay the cards out as icon + text. */
#team .framer-8418eo { display: none !important; }
#team h5 { position: relative; padding-left: 30px; }
#team h5::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8231a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Leadership photo fix: the <img> carries a height="1036" attribute that beat
   the img aspect-ratio, so set the aspect on the container and let the image
   fill it. */
.smag-lead-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.smag-lead-photo img { height: 100% !important; aspect-ratio: auto; }
/* Strength titles: lighter indent so they don't crush in narrow columns. */
#team h5 { padding-left: 26px; }

/* ── About page: replace the broken Framer card sections with one simple prose
   block (the card grids relied on broken responsive variants that collapsed).
   Hide why-buyers / selection-process / strengths; show a clean text section. */
#our-compertitive, #team, #way-we-work { display: none !important; }
.smag-about-why { order: 1; max-width: 820px; margin: 0 auto; padding: 84px 40px; text-align: center; }
.smag-why-eyebrow { font-family: "Satoshi","Satoshi Placeholder",sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #e8231a; font-weight: 600; font-size: 13px; margin: 0 0 14px; }
.smag-why-title { font-family: "Satoshi","Satoshi Placeholder",sans-serif; font-weight: 700; font-size: clamp(28px,4vw,40px); line-height: 1.1; letter-spacing: -.03em; color: #111; margin: 0 0 28px; }
.smag-why-p { font-family: "Satoshi","Satoshi Placeholder",sans-serif; font-size: 17px; line-height: 1.65; color: #333; margin: 0 auto 18px; max-width: 680px; }
@media (max-width: 600px){ .smag-about-why { padding: 56px 20px; } .smag-why-p { font-size: 16px; } }

/* CTA banner Contact button: the white-pill styling was scoped to #cta (home
   only), so on about/contact the button kept its default red fill and vanished
   against the red banner. Key it on the Heading+Button banner so it shows on
   every page that has the CTA band. */
[data-framer-name="Heading+Button"] .framer-YHHwL .framer-the1i2,
[data-framer-name="Heading+Button"] .framer-YHHwL .framer-1lzkxbs { background-color: #fff !important; }
[data-framer-name="Heading+Button"] .framer-YHHwL [class*="rolling-text-inner-"] { --text: var(--token-17b3b986-fda4-4a7f-9831-ce6e70e545fb, #e8231a) !important; text-shadow: 0 var(--line-height-abs) 0 var(--text) !important; }
[data-framer-name="Heading+Button"] .framer-YHHwL .framer-the1i2 span { color: #e8231a !important; }
[data-framer-name="Heading+Button"] .framer-YHHwL .framer-1lzkxbs use { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; }
[data-framer-name="Heading+Button"] .framer-YHHwL .framer-1lzkxbs svg path { stroke: #e8231a !important; }
/* CTA button arrow glyph: tint red to match home (white circle, red arrow). */
[data-framer-name="Heading+Button"] .framer-YHHwL .framer-1lzkxbs svg {
  filter: brightness(0) saturate(100%) invert(25%) sepia(94%) saturate(3444%) hue-rotate(353deg) brightness(97%) contrast(89%) !important;
}

/* ── Drop backdrop-filter blurs (scroll performance) ──────────────────────
   The Framer template left several backdrop-filter blurs (the nav plus large
   blur(38px) decorative panels). Safari re-blurs anything on screen every
   scroll frame, and the cost overflows the per-frame budget on high-refresh
   displays, dragging scrolling down to ~30-40fps. Native scrolling (Lenis
   removed) plus no live blur keeps it locked to the display refresh rate. The
   nav uses a more opaque solid fill so it stays readable without the blur. */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
nav.framer-ur6jyi {
  background: rgba(255, 255, 255, 0.9) !important;
}
[data-framer-name="Navbar"].smag-nav-scrolled nav.framer-ur6jyi {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Contact form inputs: Safari clips the bottom of single-line input text when
   the line box sits flush against the input edge (Chrome renders it fine). A
   little vertical padding gives the glyphs room; the field wrapper is auto
   height and centre-aligned, so it just grows a touch and stays centred. */
.framer-form-input { padding-top: 4px !important; padding-bottom: 4px !important; }
/* The select carries its padding on the field, not the wrapper, so it sat
   shorter than the text inputs. Pad its wrapper to match their height. */
.framer-form-select-wrapper { padding-top: 12px !important; padding-bottom: 12px !important; }

/* Toast shown after submitting the contact form: slides up from the bottom,
   auto-dismisses after 5s. Green accent for success, red for errors. */
.smag-toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate(-50%, 160%);
  z-index: 1000; max-width: min(92vw, 440px);
  padding: 15px 20px; border-radius: 14px;
  background: #fff; color: #141414;
  border-left: 4px solid #128a3c;
  box-shadow: 0 14px 38px rgba(20, 20, 20, 0.18);
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 15px; line-height: 1.45;
  opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.smag-toast.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.smag-toast.is-error { border-left-color: #e8231a; }
@media (prefers-reduced-motion: reduce) {
  .smag-toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* IndiaMART CTA button: mirrors the Contact button (pill + arrow badge +
   rolling-text hover) in a deeper shade of the brand red, so it reads as a
   sibling action. Injected under the Contact button in the CTA banners by
   assets/animations.js, and used (smaller) under the GSTIN line in the footer. */
.smag-im-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  background: #8a140c; color: #fff; text-decoration: none;
  padding: 7px 7px 7px 26px; border-radius: 360px;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.2;
  transition: background .25s ease, transform .25s ease;
}
.smag-im-cta:hover { background: #6e0f08; transform: translateY(-1px); }
.smag-im-cta-roll { display: inline-block; overflow: hidden; height: 1.2em; }
.smag-im-cta-inner { display: flex; flex-direction: column; transition: transform .34s cubic-bezier(.16, 1, .3, 1); }
.smag-im-cta-inner span { display: block; height: 1.2em; line-height: 1.2em; }
.smag-im-cta:hover .smag-im-cta-inner { transform: translateY(-1.2em); }
.smag-im-cta-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; flex: none; }
.smag-im-cta-badge svg { width: 16px; height: 16px; fill: none; stroke: #8a140c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Footer IndiaMART pill, sits under the GSTIN line to balance the columns. */
.smag-footer-im { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 16px; background: #8a140c; color: #fff !important; padding: 9px 16px; border-radius: 999px; font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.smag-footer-im:hover { background: #6e0f08; transform: translateY(-1px); color: #fff !important; }
.smag-footer-im svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }