/* Content fitting within the original Framer components. Motion styles are untouched. */

.inara-client-source-row {
  display: none !important;
}
.inara-client-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  /* The ticker sets scrollLeft every frame, so smooth scrolling and snapping
     would fight it — each frame's assignment would start a new animation. */
  scroll-behavior: auto;
  scrollbar-width: none;
}
.inara-client-carousel::-webkit-scrollbar {
  display: none;
}
.inara-client-carousel:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 4px;
}
.inara-client-track {
  display: flex;
  gap: 4px;
  width: max-content;
}
.inara-client-card {
  display: grid;
  flex: 0 0 clamp(180px, 15vw, 214px);
  aspect-ratio: 1.36;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
}
.inara-client-logo-frame {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
}
.inara-client-logo-frame--dark {
  width: 100%;
  height: auto;
  padding: 10px 14px;
  background: #050505;
  border-radius: 3px;
}
.inara-client-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.inara-client-logo--zoom {
  transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
  .inara-client-carousel {
    scroll-behavior: auto;
  }
}
@media (max-width: 809px) {
  .framer-wE1M6 .framer-13yua5i {
    width: 100% !important;
  }
  .framer-wE1M6 .framer-j23lg0,
  .framer-wE1M6 .framer-j23lg0 svg,
  .framer-wE1M6 .framer-j23lg0 foreignObject {
    overflow: visible !important;
  }
}

/* Hero wordmark: match the original fabrica treatment — flush to the left
   edge and scaled to full width. The Framer export shrinks the wordmark box
   to 87% and centers it, which indents "inara" and scales the SVG down with
   it; the SVG is width:100% of this box, so widening the box does both. */
.framer-wE1M6 .framer-13yua5i {
  width: 100% !important;
  place-content: center flex-start;
}

/* Reserve the text line box, not the taller SVG canvas. Centering the SVG
   in this box removes its built-in blank space above and below the letters. */
.framer-wE1M6 .framer-13yua5i {
  aspect-ratio: 424.24 / 165;
  height: auto;
}
.framer-wE1M6 .framer-gxz29i {
  margin-top: 0;
  padding-right: 0 !important;
  justify-content: flex-end !important;
}

/* Align the subtitle with the wordmark itself. The original spacer reserved
   room for the registered mark, which is hidden in the Inara version. */
.framer-wE1M6 .framer-al5dzj {
  justify-content: flex-start;
}
.framer-wE1M6 .framer-112dz82 {
  display: none;
}
.framer-wE1M6 .framer-11hmflf {
  width: 28% !important;
}

/* The reference indents only the first line; wrapped lines return to the
   hero's left content edge. Keep the indent proportional on narrow screens. */
.framer-wE1M6 .framer-1h9hge5 h1 {
  text-align: left;
  text-indent: 4em;
}
@media (max-width: 809px) {
  /* The reference moves Studio to the left on phones. */
  .framer-wE1M6 .framer-gxz29i {
    justify-content: flex-start !important;
  }
  .framer-wE1M6 .framer-11hmflf {
    width: 48% !important;
  }
  .framer-wE1M6 .framer-11hmflf p {
    text-align: left;
  }
}

/* Remove the stock model photo from the "Production capabilities" card. The
   wrapper is absolutely positioned and holds only that image, so hiding it
   leaves the card's own layout untouched. */
.framer-wE1M6 .framer-6ptzzp {
  display: none !important;
}

/* Leadership grid: keep only the two people cards (Bappy, Shahnaz Parvin).
   The Contact and Mobile & WeChat cards are hidden — their details already
   appear on the cards themselves. */
.framer-wE1M6 .framer-1cc9op0-container,
.framer-wE1M6 .framer-14qh0bk-container {
  display: none !important;
}

/* Remove the "Newest trends and insights from our team" blog section — the
   posts are placeholder content carried over from the Fabrica template. */
.framer-wE1M6 .framer-uorurm {
  display: none !important;
}

/* "The people behind Inara" section was laid out for a 2x2 card grid. With the
   Contact and Mobile & WeChat cards removed the row still reserved ~825px, so
   the cards were 1:3.3 slivers and the text column carried a ~390px hole.
   The hole is two hard-coded gaps (160px inside the About block, 120px in the
   column) that were sized for the taller layout. */
/* The + markers sit above both columns. Only the left column's heading needs
   clearance from its marker; applying the same gap to the paragraph column
   pushed that text ~56px below its neighbour. */
.framer-wE1M6 .framer-4bhj1z {
  gap: 2px !important;
  height: min-content !important;
}
.framer-wE1M6 .framer-10v5u1e {
  height: min-content !important;
}
/* clearance for the left column's heading from its own + marker */
.framer-wE1M6 .framer-ztag7n {
  margin-top: 2px;
}
.framer-wE1M6 .framer-x0giw5 {
  gap: 24px !important;
  height: min-content !important;
  padding: 32px 90px 24px 60px !important;
  place-content: center flex-start;
}
/* cards: portrait proportions instead of 1:3.3 */
.framer-wE1M6 .framer-1ja7gos {
  grid-template-rows: 440px !important;
  align-self: center;
}

/* Managing Director card: WhatsApp + WeChat icons in place of "Let's talk".
   The pill is hidden rather than removed so Framer can keep re-rendering it;
   the icons are injected alongside by assets/js/inara-contact-icons.js. */
.framer-wE1M6 .framer-hhh5z2 {
  display: none !important;
}
.inara-contact-host {
  display: flex;
  align-items: center;
}
.inara-contact-icons {
  display: flex;
  gap: 14px;
  align-items: center;
}
.inara-contact-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #0a0a0a;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.inara-contact-icon:hover {
  opacity: 0.6;
}
.inara-contact-icon:active {
  transform: scale(0.92);
}
.inara-contact-icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* "(5)" count badge on the Categories heading. */
.framer-wE1M6 .framer-65m0y4 {
  display: none !important;
}

/* Review card sizing is left to Framer's own layout: a 630px row with
   520px cards using space-between, matching the reference design. */

/* Capacity bar chart injected into card 1 of the .framer-3k1kkv row only.
   Driven by assets/js/inara-capacity-bars.js. */
.inara-capacity-chart {
  width: 100%;
  cursor: default;
}
.inara-capacity-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.inara-capacity-total {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #0a0a0a;
}
.inara-capacity-unit {
  font-size: 12px;
  font-weight: 600;
  color: #0a0a0a;
  background: #f2f2f2;
  border-radius: 999px;
  padding: 4px 10px;
}
.inara-capacity-caption {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(10, 10, 10, 0.6);
}
.inara-capacity-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  margin-top: 24px;
}
.inara-capacity-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Bars grow from the baseline, so the column packs to the bottom and
     every label lands on the same line. */
  justify-content: flex-end;
  height: 100%;
}
.inara-capacity-bar {
  width: 100%;
  background: #f2f2f2;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  box-sizing: border-box;
}
.inara-capacity-bar.is-total {
  background: #0a0a0a;
}
.inara-capacity-bar span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 600;
  color: #0a0a0a;
}
.inara-capacity-bar.is-total span {
  color: #fff;
}
.inara-capacity-label {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(10, 10, 10, 0.6);
}

/* Right-side "Production capabilities" group: split into a 2x2 grid of 4
   equal cards (Flat Knit, Circular Knit, donut, bar chart) instead of one
   tall capacity-text card beside a stacked donut/bar-chart pair.
   Driven by assets/js/inara-capacity-grid.js. */
.framer-q0il7y.inara-capacity-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.framer-q0il7y.inara-capacity-grid > * {
  height: 100% !important;
  width: 100% !important;
}
.inara-capacity-subcard {
  background: rgb(255, 255, 255);
  border-radius: 18px;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* "(2016-25©)" year stamps — beside the Our clients heading and in the
   showreel section. */
.framer-wE1M6 .framer-uzbb8i,
.framer-wE1M6 .framer-1jwabl3 {
  display: none !important;
}

/* Products section: "(17)" item count and the "©2025" stamp under the heading.
   A second ©2025 (.framer-x0ltit) belongs to the Knitwear section and stays. */
.framer-wE1M6 .framer-fdxjai,
.framer-wE1M6 .framer-edjibz {
  display: none !important;
}

/* "/YYYY" year stamps on card titles. Unscoped on purpose: these appear on
   /categories/ and /products/, each of which has its own Framer root class.
   On the product cards the slash and the year are separate elements, so the
   wrapper that holds both is hidden rather than the year alone. */
.framer-s0i6xp,
.framer-1pfmx1k,
.framer-10jxc9a {
  display: none !important;
}

/* Showreel lightbox, built by assets/js/inara-showreel.js because the
   exported Framer modal never opens in this static build. */
#inara-showreel-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  box-sizing: border-box;
}
#inara-showreel-overlay iframe {
  width: min(90vw, 1280px);
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 90vh;
  border: 0;
  border-radius: 18px;
  background: #000;
}
.inara-showreel-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0a0a0a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.inara-showreel-close:hover {
  background: #fff;
}