/* 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);
}
/* Certifications row, appended below the client carousel by
   assets/js/inara-client-slider.js with the same card styling. */
.inara-certifications {
  display: flex;
  flex-direction: column;
  /* inherit the Static column's gap so heading-to-cards spacing matches the
     client row at every breakpoint */
  gap: inherit;
  width: 100%;
  margin-top: clamp(10px, 2vw, 30px);
}
/* Certification marks are square, so pin the frame's grid row to its own
   height; an auto row would size to the image and push it past the card. */
.inara-certifications .inara-client-logo-frame {
  grid-template-rows: 100%;
}
@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: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #0a0a0a;
}
.inara-capacity-unit {
  font-size: 14px;
  font-weight: 700;
  color: #0a0a0a;
  background: #f2f2f2;
  border-radius: 999px;
  padding: 7px 14px;
}
.inara-capacity-caption {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(10, 10, 10, 0.6);
}
.inara-capacity-perstyle {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(10, 10, 10, 0.45);
}
.inara-capacity-bars {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 34px;
}
.inara-capacity-col {
  flex: 1 0 0;
  min-width: 0;
  display: grid;
  /* Two fixed rows: the bar track is a uniform 160px so every bar shares a
     baseline, and labels live in their own row underneath. Without this the
     bar and a wrapped two-line label share one stack, and the taller label
     pushes its bar up out of alignment. */
  grid-template-rows: 200px auto;
  align-items: end;
  justify-items: center;
}
.inara-capacity-bar {
  position: relative;
  width: 100%;
  align-self: end;
  background: #efefef;
  border-radius: 8px;
  box-sizing: border-box;
}
.inara-capacity-bar.is-total {
  background: #0a0a0a;
}
/* Each figure sits just above its bar, reading across. */
.inara-capacity-value {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.inara-capacity-label {
  margin-top: 12px;
  width: 100%;
  /* 14px matches the reference, but that reference uses short gauge codes
     (3GG). Product names are far longer, so hold at 13px to keep most of
     them on one line. */
  font-size: 13px;
  line-height: 1.25;
  color: rgba(10, 10, 10, 0.6);
  text-align: center;
  align-self: start;
  /* Wrap between words first. A card with many products gives each column
     little width, and a single long word ("Sweatshirt") would then spill
     into its neighbour, so let the browser hyphenate it at a proper break
     ("Sweat-shirt"). overflow-wrap:anywhere is avoided: it breaks at any
     letter, which split "Trouser" into "Trouse" + "r". */
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: 12px;
  margin-top: 12px;
}

/* "(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 video {
  width: min(90vw, 1280px);
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 90vh;
  border: 0;
  border-radius: 4px;
  background: #000;
  object-fit: contain;
}
#inara-showreel-overlay { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; }
#inara-showreel-overlay::backdrop { background: rgba(0, 0, 0, 0.88); }
video.inara-production-background { filter: brightness(0.7); }
.inara-film-hero {
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
  background: #111;
}
.inara-film-hero .framer-1kxwov3,
.inara-film-hero .framer-1nah8ke-container,
.inara-film-hero .framer-1on14o5-container { display: none !important; }
.inara-film-hero video.inara-production-background {
  filter: none;
  object-fit: contain !important;
}
.inara-colour-video {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  background: #0a0a0a;
}
/* "Build Your Collection" background: near-black cloth instead of the film
   (inara-showreel.js strips the video). Layers, top to bottom: a soft sheen
   so the surface reads as fabric rather than flat paint, a fine twill
   (the diagonal rib of denim/gabardine), a cross thread for weave depth,
   and fractal-noise fibre grain. All CSS, so nothing extra to download. */
.inara-fabric-bg {
  background-color: #0d0d0d !important;
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(90% 80% at 10% 100%, rgba(0, 0, 0, 0.55), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0 1px, transparent 1px 6px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  filter: none !important;
  opacity: 1 !important;
}
.inara-fabric-bg video {
  display: none !important;
}
.framer-Kogdd:focus-visible,
.framer-13b5nrz:focus-visible,
.inara-showreel-close:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.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;
}

/* "Whether you're developing a new knitwear collection..." above the footer.
   Framer laid this out as a two-column row with the newsletter signup on the
   right. That column is removed, so the remaining copy was left stranded
   against the left edge of a full-width grid — centre it and its byline. */
.framer-11tgv51 {
  /* Framer declares two 758px tracks for the copy and the signup. With the
     signup gone the copy still sits in track one and the second track stays
     empty, so justify-items alone cannot move it — collapse the row to a
     single centred track. */
  grid-template-columns: minmax(0, 758px) !important;
  justify-content: center !important;
  justify-items: center !important;
}
.framer-11tgv51 > .framer-1uydg08 {
  /* The column is wider than its content and Framer aligns both blocks to
     its start, leaving them sitting left of the row's centre. Centre the
     column's own children and let each block shrink to its content. */
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* The copy block and, below it, the avatar + name + role row. */
/* Stack the byline: avatar on the first row, then the name, then the role,
   each centred. Framer lays it out as avatar beside a text column, where the
   text block also carries flex:1 0 0 and stretches the full width, pushing
   the avatar to the left edge. */
.framer-11tgv51 .framer-1oa901j {
  flex-direction: column !important;
  gap: 10px;
}
.framer-11tgv51 .framer-1oa901j > .framer-6lblfs {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap;
  align-items: center !important;
  text-align: center;
}
/* The name and role sit in a column flexbox, where justify-content runs
   vertically — horizontal centring is align-items. Set both, on the column
   and on each row inside it, so the text itself centres rather than just its
   equally sized boxes. */
.framer-11tgv51 .framer-1oa901j > .framer-6lblfs,
.framer-11tgv51 .framer-1oa901j > .framer-6lblfs > * {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.framer-11tgv51 .framer-1oa901j > .framer-6lblfs * {
  text-align: center !important;
}

/* The paragraph sets text-align:start itself, so centring only its wrapper
   left the copy ragged-left inside a centred box. */
.framer-11tgv51 .framer-183swp4 p,
.framer-11tgv51 .framer-183swp4 .framer-text {
  text-align: center !important;
}

.framer-11tgv51 .framer-183swp4,
.framer-11tgv51 .framer-1oa901j {
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  text-align: center;
}

/* Footer credits left over from the Framer template: a "Built for Sourcing"
   marquee (rendered twice so it can loop seamlessly) and a "Managed by /
   Inara Sourcing Team" block. Privacy Policy and Terms of Service, their
   siblings in the same strip, stay. */
footer .framer-1dor1xq-container,
footer .framer-joiwk4-container {
  display: none !important;
}

/* "Build Your Collection" quote under the production tabs: a testimonial
   block from the template, not wanted on the site. Hidden rather than
   deleted, since removing it from the HTML breaks React's hydration. */
.framer-yp4ovv {
  display: none !important;
}

/* Commitment stat labels: Framer caps each at 140px, which breaks the longer
   ones ("Knit & woven, outerwear capacity monthly") over three lines. Give
   them room to sit on two at most, never wider than their column. */
.framer-1i2okjw .framer-j604sy {
  width: auto !important;
  max-width: min(260px, 100%) !important;
}

/* ── Narrow viewports ─────────────────────────────────────────────────────
   The rules above assume the desktop layout, with a byline held on one
   line. It needs relaxing on a phone. */
@media (max-width: 720px) {
  /* nowrap keeps "Ahmad Hossain Bappy" on one line, which overflows a narrow
     column. Let it wrap here. */
  .framer-11tgv51 .framer-1oa901j > .framer-6lblfs {
    white-space: normal;
  }

  /* The closing copy's forced break lands mid-column on a phone; let the
     text reflow naturally. */
  .framer-11tgv51 .framer-183swp4 br {
    display: none;
  }

  /* Bar labels get tight once a card is full width; give them room. */
  .inara-capacity-bars {
    gap: 8px;
  }
}

/* Categories accordion: product pills a row does not use
   (inara-category-rows.js). */
.inara-pill-hidden {
  display: none !important;
}

/* Categories accordion: each product pill opens its product's card on the
   category page (inara-category-rows.js). */
.inara-pill-link {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.inara-pill-link:hover {
  opacity: 0.75;
}

.inara-pill-link:focus-visible {
  outline: 2px solid rgb(255, 255, 255);
  outline-offset: 3px;
  border-radius: 50px;
}

/* "Our commitment" stats: one of Framer's four stats is removed
   (inara-stats-row.js), so the desktop and tablet grid drops to three
   columns. Phones keep Framer's two columns. */
@media (min-width: 810px) {
  .framer-wE1M6 .framer-1i2okjw.inara-stats-trimmed {
    grid-template-columns: repeat(3, minmax(50px, 1fr));
  }
}



/* ── Production capabilities (inara-capacity-grid.js) ─────────────────────
   The script adds .inara-cap beside Framer's original row; hide the row only
   once it is there, so the section never renders empty. */
.framer-9mot1k:has(~ .inara-cap) {
  display: none !important;
}

.inara-cap {
  --cap-ink: #111;
  --cap-muted: rgba(17, 17, 17, 0.55);
  --cap-line: #ececec;
  --cap-fill: #2b2b2b;
  /* the site's content container: Framer's sections cap at 1520px, centred */
  flex: 1 0 0;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  color: var(--cap-ink);
  -webkit-font-smoothing: antialiased;
}

.inara-cap h2,
.inara-cap h3,
.inara-cap h4,
.inara-cap p,
.inara-cap ul {
  margin: 0;
  padding: 0;
}

.inara-cap-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.inara-cap-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Banner */
.inara-cap-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  border-radius: 20px;
  background: #151515;
  color: #fff;
}

.inara-cap-rings {
  position: absolute;
  top: 50%;
  right: 16%;
  width: 380px;
  height: 380px;
  transform: translateY(-50%);
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  pointer-events: none;
}

.inara-cap-banner-main,
.inara-cap-banner-side {
  position: relative;
}

.inara-cap-banner .inara-cap-eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.inara-cap-title {
  margin-top: 18px !important;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.inara-cap-sub {
  margin-top: 16px !important;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

.inara-cap-banner-side {
  flex: 0 0 240px;
}

.inara-cap-banner-side p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

/* Buttons */
.inara-cap-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #151515;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.inara-cap-btn:hover {
  background: #000;
}

.inara-cap-btn.is-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.inara-cap-btn.is-ghost:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}

.inara-cap-arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

/* "Our capacity, at a glance" */
.inara-cap-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 18px;
}

.inara-cap-heading h3 {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.inara-cap-heading p {
  font-size: 12px;
  color: var(--cap-muted);
}

/* Cards */
.inara-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.inara-cap-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
}

.inara-cap-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.inara-cap-card h4 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.inara-cap-index {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--cap-muted);
}

.inara-cap-total {
  margin-top: 10px !important;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.inara-cap-unit {
  margin-top: 8px !important;
  font-size: 11px;
  color: var(--cap-muted);
}

.inara-cap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px !important;
}

/* Few products: spread them out, as the card is as tall as its row. */
.inara-cap-list.is-few {
  gap: 38px;
}

.inara-cap-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 8px;
  font-size: 13px;
}

.inara-cap-value {
  font-weight: 600;
}

.inara-cap-track {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--cap-line);
  overflow: hidden;
}

.inara-cap-track span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 2px;
  background: var(--cap-fill);
}

.inara-cap .inara-cap-foot {
  margin-top: auto;
  padding-top: 28px;
  font-size: 11px;
  color: var(--cap-muted);
}

/* Closing call to action */
.inara-cap-card.is-cta {
  /* Six line cards fill whole rows, so the CTA gets a full-width row of its own. */
  grid-column: 1 / -1;
  border-color: transparent;
  background: #e7e6e0;
}

.inara-cap-card.is-cta .inara-cap-eyebrow {
  color: var(--cap-muted);
  font-size: 10px;
}

.inara-cap-card.is-cta h4 {
  margin-top: 36px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.inara-cap-cta-text {
  margin-top: 18px !important;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cap-muted);
}

.inara-cap-card.is-cta .inara-cap-btn {
  margin-top: auto;
}

.inara-cap .inara-cap-card.is-cta .inara-cap-foot {
  margin-top: 0;
  padding-top: 14px;
}

/* Full-width CTA row: text on the left, button on the right. */
@media (min-width: 810px) {
  .inara-cap-card.is-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
  }

  .inara-cap-card.is-cta > * {
    grid-column: 1;
  }

  .inara-cap-card.is-cta .inara-cap-btn {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    min-width: 260px;
    margin: 0;
  }
}

/* Footnote */
.inara-cap-note {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  font-size: 11px;
  color: var(--cap-muted);
}

.inara-cap-brand {
  font-family: "Nave", serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tablet: two cards per row. */
@media (max-width: 1199.98px) {
  .inara-cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: one column, banner stacked. */
@media (max-width: 809.98px) {
  .inara-cap-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 28px 24px;
  }

  .inara-cap-banner-side {
    flex-basis: auto;
  }

  .inara-cap-title {
    font-size: 34px;
  }

  .inara-cap-rings {
    right: -120px;
  }

  .inara-cap-heading,
  .inara-cap-note {
    flex-direction: column;
    gap: 6px;
  }

  .inara-cap-grid {
    grid-template-columns: 1fr;
  }

  .inara-cap-card.is-cta .inara-cap-btn {
    margin-top: 32px;
  }
}

/* Production panel: per-product monthly capacity for the selected tab,
   in the empty cell beside the big stat (inara-production-tabs.js). */
.inara-tab-cap {
  display: grid;
  /* The cell is a flex box; without this the list shrinks to its content. */
  align-self: stretch;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}

.inara-tab-cap li {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  font-size: 14px;
}

.inara-tab-cap-name {
  color: rgba(255, 255, 255, 0.7);
}

.inara-tab-cap strong {
  font-weight: 600;
}

.inara-tab-cap-track {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.inara-tab-cap-track span {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 2px;
  background: #fff;
}

@media (max-width: 809px) {
  .inara-tab-cap {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
}

/* WeChat QR under the Managing Director byline in the footer, added by
   assets/js/inara-collection-cta.js. White card to match the client and
   certification logo cards. */
.inara-wechat-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}
.inara-wechat-qr img {
  display: block;
  width: 132px;
  height: 132px;
  padding: 10px;
  background: #fff;
  border-radius: 14px;
  box-sizing: border-box;
}
.inara-wechat-qr figcaption {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 13px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: rgba(10, 10, 10, 0.6);
}

/* Framer's fixed "progressive blur" strip along the bottom of the viewport
   (three stacked backdrop blurs), which smeared whatever scrolled under it.
   Hidden rather than removed: React owns the node. */
.framer-1apphqj-container {
  display: none !important;
}