/* Header logo: the Framer header shows the name as plain text
   ("inara sourcing"). Draw the Inara Sourcing Ltd. logo in that link instead
   and drop the text entirely; the link takes the logo's box so the header
   layout does not shift, and inara-nav-scroll.js gives it an aria-label so
   screen readers still announce it. The text node itself stays in the HTML
   because removing it would break React's hydration of the page.

   The logo is two images: the knot icon (::before), which turns slowly and
   steadily, and the INARA / SOURCING LTD. wordmark beside it (::after). */
.framer-1a90gm8 {
  position: relative;
  min-width: 142px;
  min-height: 38px;
}

.framer-1a90gm8 p {
  display: none !important;
}

.framer-1a90gm8::before,
.framer-1a90gm8::after {
  content: "";
  position: absolute;
  top: 50%;
  pointer-events: none;
}

.framer-1a90gm8::before {
  left: 0;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  background: url("/assets/images/inara/inara-icon.png") center / contain no-repeat;
  animation: inara-logo-spin 8s linear infinite;
}

.framer-1a90gm8::after {
  left: 46px;
  width: 96px;
  height: 35px;
  margin-top: -17.5px;
  background: url("/assets/images/inara/inara-logo-black.svg") left center / contain no-repeat;
}

@keyframes inara-logo-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect a visitor's "reduce motion" setting: keep the icon still. */
@media (prefers-reduced-motion: reduce) {
  .framer-1a90gm8::before {
    animation: none;
  }
}

/* Production capabilities (the dark "Bento" card): Framer sets the company
   name as white text in an SVG. Show the white Inara Sourcing Ltd. logo in
   its place, spanning the card's width inside its padding and centered, with
   the text kept but hidden. */
.framer-15o920v .framer-1obnok8 {
  align-self: stretch;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1000 / 304;
  margin: 0 24px;
  background: url("/assets/images/brand/logo-full-white.png") center / contain no-repeat;
}

.framer-15o920v .framer-1obnok8 foreignObject {
  opacity: 0;
}

/* Section markers: Framer's small circled "+" beside the section labels
   ("Our clients", "Our product categories", ...) becomes the Inara knot
   emblem. The component comes in two colourways, told apart by the colour
   token Framer writes inline: a dark circle on light sections gets the black
   emblem, a light circle on dark sections gets the white one. */
.framer-mF96D {
  background: none !important;
}

.framer-mF96D > * {
  display: none !important;
}

.framer-mF96D[style*="token-88d5059b"] {
  background: url("/assets/images/brand/icon-black.png") center / contain no-repeat !important;
}

.framer-mF96D[style*="token-90ab9b9d"] {
  background: url("/assets/images/brand/icon-white.png") center / contain no-repeat !important;
}

/* Thin "+" marks (Framer component ZPULr): the hero's four marks, the
   testimonial cards, the "People behind Inara" section, the footer and the
   dark Bento card all become Inara emblems. The bars' inline colour picks
   the colourway: the dark token gets the black emblem, anything else (white)
   gets the white one. The Categories accordion's +/- toggle
   (.framer-1xewh8u-container) uses the same component and keeps its bars. */
:not(.framer-1xewh8u-container) > .framer-ZPULr {
  background: url("/assets/images/brand/icon-white.png") center / contain no-repeat !important;
}

:not(.framer-1xewh8u-container) > .framer-ZPULr:has(> [style*="token-88d5059b"]) {
  background-image: url("/assets/images/brand/icon-black.png") !important;
}

:not(.framer-1xewh8u-container) > .framer-ZPULr > * {
  display: none !important;
}

/* Categories accordion: every row gets the full-width divider, open or
   closed. Framer draws it with the row's own border but zeroes it on closed
   desktop rows, leaving only a shorter line under the content column (the
   inner "2" block's border). Keep the full-width one and drop the short one
   so all rows match. Stylesheet !important beats Framer's inline values. */
.framer-aYo31 .framer-xJaEr {
  --border-bottom-width: 1px !important;
}

.framer-aYo31 .framer-xJaEr .framer-1ox4qjh {
  --border-bottom-width: 0px !important;
}

/* Contact email link: the emblem beside "info@inarasourcing.com" is 28px,
   in scale with the link text, instead of the 18px section-marker size.
   Scoped to the link component (XRBqV), so the section markers elsewhere
   keep their size. */
.framer-XRBqV .framer-mF96D {
  width: 28px !important;
  height: 28px !important;
}

/* Products cards: the full white Inara Sourcing Ltd. logo sits in the top-left
   corner of each card's photo, in place of the centred gold-and-blue logo.
   Framer's <img> is hidden and the white logo drawn as the layer's
   background; the layer keeps Framer's own width per breakpoint (25% of the
   card, 36% on phones) and takes the logo's aspect ratio. */
.framer-p1ypN .framer-jem6dr {
  position: absolute !important;
  top: 28px;
  left: 28px;
  height: auto !important;
  aspect-ratio: 1000 / 304;
  background: url("/assets/images/brand/logo-full-white.png") left top / contain no-repeat;
}

.framer-p1ypN .framer-jem6dr > * {
  display: none !important;
}

@media (max-width: 809.98px) {
  .framer-p1ypN .framer-jem6dr {
    top: 20px;
    left: 20px;
  }
}

/* Footer: Privacy Policy / Terms of Service sit centred under the page. On
   desktop they live in the right-hand column of the footer's two-column grid,
   whose left edge is the page's centre line, so the pair started at the
   centre instead of straddling it. Pull the block back by half its width.
   Tablet and phone stack the links full width and are left as they are. */
@media (min-width: 1200px) {
  footer .framer-1yvxvsb {
    transform: translateX(-50%);
  }
  /* The shift moves Privacy Policy left of this column's edge; with Framer's
     overflow:hidden it was clipped away, leaving only Terms of Service. */
  footer .framer-1hjmsu8 {
    overflow: visible !important;
  }
}

/* Nave is scoped to the large homepage hero wordmark. */
@font-face {
  font-family: "Nave";
  src: url("../fonts/nave-font-family/nave-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.framer-wE1M6 .framer-13yua5i .framer-text {
  --framer-font-family: "Nave", sans-serif !important;
  --framer-font-weight: 700 !important;
  font-family: "Nave", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* Nave's final serif extends past the SVG text box with tight tracking. */
.framer-wE1M6 .framer-13yua5i,
.framer-wE1M6 .framer-13yua5i svg,
.framer-wE1M6 .framer-13yua5i foreignObject {
  overflow: visible !important;
}

/* Keep the loader's per-letter animation in the same Nave wordmark style. */
.framer-KTJUk .framer-1b4e3p4 .framer-text,
.framer-KTJUk .framer-1b4e3p4 .framer-text span {
  font-family: "Nave", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* Match the hero subtitle to the Nave wordmark. */
.framer-wE1M6 .framer-11hmflf .framer-text {
  --framer-font-family: "Nave", sans-serif !important;
  --framer-font-weight: 700 !important;
  font-family: "Nave", sans-serif !important;
  font-weight: 700 !important;
}

.framer-wE1M6 .framer-11hmflf,
.framer-wE1M6 .framer-11hmflf foreignObject {
  overflow: visible !important;
}

/* Hero card: once inara-nav-scroll.js marks it shown (the visitor was away
   from the top before its entrance played), pin it in its final place so
   scrolling back up never reveals an empty band or a late slide-in. */
.framer-n6szvs[data-inara-shown] {
  opacity: 1 !important;
  transform: none !important;
}

/* Section headings (Products., Categories., Apparel., Production., FAQ.,
   Build Your Collection, and the smaller "Excellence in apparel
   manufacturing." / "The people behind Inara." style) and the Categories
   accordion titles (Sweater ... Denim, closed and open) in Nave, like the
   hero wordmark. */
.framer-styles-preset-1yvd34u,
.framer-styles-preset-4vuy4n,
.framer-aYo31 .framer-1pna3mw .framer-text,
.framer-aYo31 .framer-1xsxun7 .framer-text {
  --framer-font-family: "Nave", sans-serif !important;
  --framer-font-weight: 700 !important;
  font-family: "Nave", sans-serif !important;
  font-weight: 700 !important;
}

/* Hero: "sourcing" sits closer under the INARA wordmark. The wordmark's box
   was sized for the original lowercase text, so with Nave capitals it leaves
   an empty band below the letters. Pull the "sourcing" row up by the same
   proportion of the page width, which keeps the gap even at every width. */
@media (min-width: 810px) {
  .framer-wE1M6 .framer-gxz29i {
    margin-top: -4vw;
  }
}

/* Products cards: keep the hover effect (zoom, frame, shade, coloured dots)
   but not its blur, so the photo stays sharp while it zooms. The blur is an
   inline style Framer animates on the photo layer, hence !important. */
.framer-p1ypN .framer-jh1lcx {
  filter: none !important;
  -webkit-filter: none !important;
}


/* Footer: the three "+" marks heading the contact, LinkedIn and WhatsApp
   columns become black Inara emblems (dark marks on the light footer). */
footer .framer-ZPULr {
  background: url("/assets/images/brand/icon-black.png") center / contain no-repeat !important;
}

footer .framer-ZPULr > * {
  display: none !important;
}