/* Tejori — home page */

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
}

.hero img {
  width: 100%;
  height: auto;
}

.hero__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 50vw;
  text-align: center;
  color: #fff;
}

.hero__h {
  max-width: 100%;
  margin: 0;
  font-size: 3.75vw;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1.5px .75px rgba(0, 0, 0, .7);
}

.hero__btns {
  display: flex;
  justify-content: center;
  gap: 1.302vw;
  margin-top: 1.198vw;
}

.hero__sell {
  background: var(--c-green);
  color: #fff;
  --btn-hover: #fff;
}

.hero__sell:hover {
  color: var(--c-green);
}

.hero__buy {
  background: #fff;
  color: var(--c-green);
}

.hero__buy:hover {
  color: #fff;
}

@media (max-width: 767px) {
  .hero__txt {
    top: 55%;
    left: 50%;
    width: 100%;
    max-width: 76.136vw;
    transform: translate(-50%, -50%);
  }

  .hero__h {
    max-width: 100%;
    font-size: 9.545vw;
    line-height: 11.818vw;
  }

  .hero__btns {
    flex-wrap: wrap;
    gap: 4.545vw;
    margin-top: 4.545vw;
  }

  .hero__btns .btn {
    max-width: 45.455vw;
  }
}

/* ---------- feature strip ---------- */

.feat {
  display: flex;
  justify-content: center;
  gap: 4.167vw;
  padding: .521vw 0;
  background: #fff;
}

.feat__i {
  display: flex;
  align-items: center;
}

.feat__i img {
  width: 2.604vw;
  height: 2.604vw;
  margin-right: .729vw;
}

.feat__t h3 {
  margin: 0;
  font-size: 1.042vw;
  font-weight: 700;
  line-height: 1.563vw;
}

.feat__t p {
  margin: 0;
  font-size: .833vw;
  font-weight: 600;
  line-height: 1.042vw;
  color: #555;
}

@media (max-width: 767px) {
  .feat {
    gap: 54px;
    padding: 10px 15px;
    justify-content: flex-start;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .feat::-webkit-scrollbar {
    display: none;
  }

  .feat__i {
    min-width: fit-content;
    gap: 10px;
  }

  .feat__i img {
    width: 9.091vw;
    height: 9.091vw;
    margin-right: 0;
  }

  .feat__t h3 {
    font-size: 15px;
    line-height: 22.5px;
  }

  .feat__t p {
    font-size: 10.6px;
    line-height: 13.25px;
  }
}

/* ---------- pre-loved ---------- */

/* ---------- in the press ---------- */
/* a quiet greyscale row of outlets (client request, after their "In the press" reference) */

.prs {
  padding: clamp(28px, 2.604vw, 56px) 5.208vw;
  text-align: center;
  background: #fff;
}

/* A prominent section title (client request — it was a small grey caption): larger, bold,
   near-black, with a short green rule either side. */
.prs__h {
  /* more room under the heading (client request — was 16–32px) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.25vw, 24px);
  margin: 0 0 clamp(24px, 2.344vw, 48px);
  font-family: var(--ff-alt);
  font-size: clamp(18px, 1.458vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink, #121212);
}

.prs__h::before,
.prs__h::after {
  content: "";
  width: clamp(32px, 3.125vw, 64px);
  height: 2px;
  background: var(--c-green, #389a81);
}

/* equal space between the logos (client request — they sat bunched in the middle), across a
   centred band about two-thirds of the page wide (client request — edge to edge spread them
   too far apart) */
.prs__l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3.646vw, 80px);
  max-width: 62.5vw;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* the list's second copy only exists for the phone ticker below */
.prs__i--dup {
  display: none;
}

/* Phones: one row that scrolls by on its own, looping (client request — it was a 2×2
   grid). The list holds the logos twice, side by side, and slides left by exactly half
   its width, so the second copy lands where the first began and the loop is seamless.
   Spacing is padding on each logo rather than `gap`, so both halves are the same width. */
@media (max-width: 767px) {
  /* more breathing room round the ticker on a phone (client request): under the heading,
     and under the logos before the next section */
  .prs {
    overflow: hidden;
    padding-inline: 0;
    padding-bottom: 44px;
  }

  .prs .prs__h {
    margin-bottom: 36px;
  }

  .prs__l {
    justify-content: flex-start;
    gap: 0;
    width: max-content;
    max-width: none;
    /* 10px above and below the moving row (client request) */
    padding-block: 10px;
    /* a little quicker (client request — was 20s a loop) */
    animation: prs-ticker 16s linear infinite;
  }

  .prs__i,
  .prs__i--dup {
    display: block;
    flex: none;
    padding-inline: 24px;
  }

  /* bigger and stronger on a phone (client request — they read small and faint). Scoped
     under .prs so it beats the general .prs__i img rule further down this file. */
  .prs .prs__i img {
    height: 44px;
    max-width: 180px;
    opacity: .9;
  }

  @keyframes prs-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

/* Reduced motion: no ticker — the logos sit still as a two-by-two grid instead. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .prs__l {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    row-gap: 24px;
    width: auto;
    animation: none;
  }

  .prs__i--dup {
    display: none;
  }
}

.prs__i img {
  display: block;
  height: clamp(30px, 2.604vw, 54px);
  width: auto;
  max-width: clamp(110px, 10.417vw, 220px);
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
}

.prs__t {
  font-family: var(--ff-alt);
  font-size: clamp(14px, 1.146vw, 24px);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a8a8a;
}

.pl {
  padding: 4.167vw 0;
  text-align: center;
  background: #f5f5f5;
}

.pl__box {
  max-width: 84.74vw;
  margin-inline: auto;
}

.pl__sub {
  margin: 0;
  font-size: 2.292vw;
  font-weight: 700;
  line-height: 2.521vw;
  color: var(--c-txt);
}

.pl__h {
  margin: .521vw 0 0;
  font-family: var(--ff-script);
  font-size: 6.43vw;
  font-weight: 400;
  /* Taller than the font size on purpose: the script face's ascenders
     (P, d, N) reach well above the em box, and a tighter line-height let
     them ride up over the "Shop" line above. */
  line-height: 8.854vw;
}

.pl__d {
  margin: .521vw 0 2.083vw;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 2.083vw;
  color: var(--c-mute);
}

.pl__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5vw;
}

/* A last tile alone on its row (eleven tiles: 5 + 5 + 1) sits in the middle column
   rather than at the left, same size as the rest. */
.pl__c:last-child:nth-child(5n + 1) {
  grid-column: 3;
}

.pl__c {
  position: relative;
  display: block;
  overflow: hidden;
}

.pl__c img {
  width: 100%;
  /* the hover zoom grows from the top edge, so a model's head stays in the tile (client
     report: a 1.2 zoom from the centre cut the Formal model's head off) */
  transform-origin: 50% 0;
  transition: transform .4s ease;
}

.pl__c:hover img {
  transform: scale(1.06);
}

.pl__lb {
  position: absolute;
  bottom: .521vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  box-sizing: border-box;
  /* Real category names can be long single "words" ("Jackets/Waistcoats") — keep
     them inside the tile: wrap after the slash (<wbr> in home.blade.php), and as a
     last resort anywhere, rather than running off the edge. */
  padding: 0 .521vw;
  overflow-wrap: anywhere;
  font-size: 1.965vw;
  line-height: 2.135vw;
  color: #fff;
  text-shadow: .082vw .041vw .123vw #000;
}

@media (max-width: 767px) {
  .pl {
    padding: 9.091vw 4.545vw;
  }

  .pl__box {
    max-width: 100%;
  }

  .pl__sub {
    font-size: 7.5vw;
    line-height: 8.182vw;
  }

  .pl__h {
    margin-top: 1.136vw;
    font-size: 13.636vw;
    line-height: 18.75vw;
  }

  .pl__d {
    margin: 1.136vw 0 9.091vw;
    font-size: 3.409vw;
    line-height: 4.261vw;
  }

  .pl__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4.545vw;
  }

  /* Two columns: undo the desktop column 3, and centre an odd last tile at one column's width. */
  .pl__c:last-child:nth-child(5n + 1) {
    grid-column: auto;
  }

  .pl__c:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 4.545vw) / 2);
  }

  .pl__lb {
    bottom: 2.5vw;
    font-size: 5.665vw;
    line-height: 6.136vw;
  }
}

/* ---------- alankar ---------- */

.alk {
  background: #fff;
  overflow: hidden;
}

.alk__in {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.alk__txt {
  flex: 1;
  padding-left: 5.108vw;
}

.alk__d {
  max-width: 28.646vw;
  margin: 0 0 2.865vw;
  font-size: 1.146vw;
  line-height: 1.563vw;
  letter-spacing: 0;
  color: var(--c-mute);
}

.alk__btn {
  background: var(--c-green);
  color: #fff;
  margin-bottom: 4.167vw;
  text-transform: uppercase;
}

.alk__btn .btn__in {
  gap: 1.779vw;
}

.alk__btn svg {
  height: 1.458vw;
}

.alk__img {
  width: 62.083vw;
  box-shadow: 0 .781vw 2.083vw rgba(0, 0, 0, .12);
}

/* the picture's own file is narrower than the box on some widths — stretch it */
.alk__img img {
  width: 100%;
  height: auto;
}

.tags {
  position: absolute;
  top: 4.067vw;
  left: 4.067vw;
  display: flex;
  flex-direction: column;
  row-gap: .521vw;
}

.tag {
  display: block;
  max-width: max-content;
  padding: .469vw 1.094vw;
  font-size: 2.763vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .414vw;
  text-transform: uppercase;
  color: var(--c-txt);
  background: #fff;
}

.tag--b {
  font-weight: 700;
}

.tag--pink {
  color: #e9599f;
}

@media (max-width: 768px) {
  .alk__in {
    flex-wrap: wrap;
  }

  .alk__txt {
    order: 1;
    padding: 6.818vw 4.545vw 9.091vw;
  }

  .alk__d {
    max-width: 100%;
    margin-bottom: 6.818vw;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  /* this button carries its own small-screen sizes, and it switches one pixel
     later than the shared .btn rule does */
  .alk__btn {
    max-width: 100%;
    margin-bottom: 0;
    padding: 1.591vw 3.409vw;
    font-size: 4.545vw;
    letter-spacing: .227vw;
  }

  .alk__btn .btn__in {
    gap: 4.545vw;
    justify-content: center;
  }

  .alk__btn .btn__in svg {
    width: 8.759vw;
    height: 6.58vw;
  }

  .alk__img {
    position: relative;
    width: 100%;
  }

  .tags {
    top: auto;
    bottom: 9.091vw;
    left: 4.545vw;
    row-gap: 1.136vw;
  }

  .tag {
    padding: .909vw 2.273vw;
    font-size: 5.029vw;
    letter-spacing: .754vw;
  }
}

/* ---------- how it works ---------- */

.stp {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.stp__box {
  position: relative;
  max-width: 75vw;
  margin-inline: auto;
  padding-block: 5.208vw;
}

.stp__box::after {
  content: "";
  position: absolute;
  right: -6.458vw;
  bottom: 3.177vw;
  width: 22.604vw;
  height: 16.979vw;
  background: url('../img/hookdesk.webp') no-repeat;
}

.stp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.125vw 6.198vw;
}

.stp__i {
  display: flex;
  align-items: flex-start;
  column-gap: 1.563vw;
}

.stp__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.906vw;
  min-width: 3.906vw;
  height: 3.906vw;
  font-family: var(--ff-alt);
  font-size: 2.083vw;
  font-weight: 800;
  color: #fff;
  background: var(--c-green);
  border-radius: 50%;
}

.stp__c h3 {
  margin: 0;
  font-size: 2.083vw;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-txt);
}

.stp__c p {
  margin: 0;
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.875vw;
  letter-spacing: 0;
  color: var(--c-txt);
}

@media (max-width: 767px) {
  .stp__box {
    max-width: 100%;
    padding-block: 9.091vw;
    padding-inline: 4.545vw;
  }

  .stp__box::after {
    right: -7.273vw;
    bottom: 10.455vw;
    width: 46.591vw;
    height: 35vw;
    background-image: url('../img/hook.webp');
  }

  .stp__grid {
    grid-template-columns: 1fr;
    gap: 8.636vw;
  }

  .stp__i {
    column-gap: 4.545vw;
  }

  .stp__n {
    width: 12.614vw;
    min-width: 12.614vw;
    height: 12.614vw;
    margin-top: 1.136vw;
    align-items: normal;
    font-size: 6.818vw;
    line-height: 13.409vw;
    text-align: center;
  }

  .stp__c h3 {
    margin-bottom: 2.727vw;
    font-size: 5.455vw;
    line-height: 1;
  }

  .stp__c p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }
}

/* ---------- welcome band (home copy) ----------
   The homepage's welcome copy runs longer than the shared `.wel` band in
   welcome.css: a tagline, two subheadings and a row of three statistics.
   Those extra parts are styled here so the product, projects and
   guarantees pages that reuse `.wel` stay as they are. */

.wel__tag {
  margin: 1.302vw 0 0;
  font-size: 1.458vw;
  font-weight: 700;
  line-height: 1.875vw;
  color: var(--c-green);
}

.wel__d + .wel__d {
  margin-top: .781vw;
}

.wel__sh {
  margin: 2.604vw 0 0;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 2.083vw;
  color: var(--c-txt);
}

.wel__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.083vw;
  margin-top: 1.302vw;
}

.wel__n {
  display: block;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 2.604vw;
  color: var(--c-green);
}

.wel__st p {
  margin: .521vw 0 0;
  font-size: 1.146vw;
  line-height: 1.719vw;
  color: var(--c-mute);
}

@media (max-width: 767px) {
  .wel__tag {
    margin-top: 3.409vw;
    font-size: 4.091vw;
    line-height: 5.455vw;
  }

  .wel__d + .wel__d {
    margin-top: 2.273vw;
  }

  .wel__sh {
    margin-top: 9.091vw;
    font-size: 4.773vw;
    line-height: 6.136vw;
  }

  .wel__stats {
    grid-template-columns: 1fr;
    gap: 5.682vw;
    margin-top: 4.545vw;
  }

  .wel__n {
    font-size: 6.364vw;
    line-height: 7.955vw;
  }

  .wel__st p {
    margin-top: 1.136vw;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }
}

/* ---------- "Why Tejori?" ⇄ guarantee band swap ----------
   Client request: "Why Tejori?" lists the guarantees (the guarantee band's own grn__r /
   grn__i classes, from guarantee.css), and the guarantee band carries the textile-waste
   statistics (wel__stats, above) with its "Tejori Guaranteed" heading removed. */

.wel__why {
  margin-top: 1.563vw;
}

/* the quote no longer sits under the heading, so it starts at the top of its column */
.grn__quote--top {
  margin-top: 0;
}

/* the quote's second paragraph, in the same type, one line's gap below the first */
.grn__quote--more {
  margin-top: 1.042vw;
}

.grn__stats {
  flex: 1;
  align-self: center;
  margin-top: 0;
}

/* Homepage only (client request): the quote on a row of its own, centred, with the three
   statistics in one line underneath — it was the quote in a narrow column to their left.
   Dressed up on a second request ("more beautiful"): a big green script quote mark, the
   opening question larger than the line after it, a green-and-amber divider, and each
   statistic as a cream card with a green top edge. */
.grn__in--stack {
  flex-direction: column;
  align-items: center;
  gap: 3.125vw;
}

.grn__in--stack .grn__l {
  position: relative;
  max-width: 52.083vw;
  padding-top: 3.385vw;
  text-align: center;
}

.grn__in--stack .grn__l::before {
  content: "\201C";
  position: absolute;
  top: -1.042vw;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 7.813vw;
  line-height: 1;
  color: var(--c-green);
  opacity: .9;
}

.grn__in--stack .grn__quote--top {
  font-size: 2.188vw;
  line-height: 2.865vw;
  color: var(--c-ink);
}

.grn__in--stack .grn__quote--more {
  margin-top: 1.25vw;
  font-size: 1.406vw;
  font-weight: 500;
  line-height: 2.188vw;
  color: var(--c-mute);
}

.grn__in--stack .grn__by {
  margin-top: 1.042vw;
  font-size: 2.396vw;
  text-align: center;
  color: var(--c-green);
}

/* two short green rules either side of an amber dot, between the quote and the figures */
.grn__in--stack .grn__l::after {
  content: "";
  display: block;
  width: 9.375vw;
  height: .625vw;
  margin: 2.604vw auto 0;
  background:
    radial-gradient(circle, var(--c-amber) 0 .313vw, transparent .339vw) center / .625vw .625vw no-repeat,
    linear-gradient(var(--c-green), var(--c-green)) left center / 3.906vw 2px no-repeat,
    linear-gradient(var(--c-green), var(--c-green)) right center / 3.906vw 2px no-repeat;
}

.grn__in--stack .grn__stats {
  align-self: stretch;
  gap: 1.667vw;
}

.grn__in--stack .wel__st {
  padding: 1.875vw 1.875vw 2.083vw;
  border-top: .208vw solid var(--c-green);
  border-radius: .417vw;
  background: var(--c-cream);
  box-shadow: 0 .26vw 1.042vw rgba(0, 0, 0, .05);
}

.grn__in--stack .wel__n {
  font-size: 2.396vw;
  line-height: 2.865vw;
}

@media (max-width: 767px) {
  .grn__quote--more {
    margin-top: 4.545vw;
  }

  .grn__in--stack {
    gap: 6.818vw;
  }

  .grn__in--stack .grn__l {
    max-width: 100%;
    padding-top: 11.364vw;
  }

  .grn__in--stack .grn__l::before {
    top: -2.273vw;
    font-size: 20.455vw;
  }

  .grn__in--stack .grn__quote--top {
    font-size: 5.682vw;
    line-height: 7.5vw;
  }

  .grn__in--stack .grn__quote--more {
    margin-top: 3.409vw;
    font-size: 4.091vw;
    line-height: 6.136vw;
  }

  .grn__in--stack .grn__by {
    margin-top: 3.409vw;
    font-size: 7.273vw;
  }

  .grn__in--stack .grn__l::after {
    width: 27.273vw;
    height: 2.273vw;
    margin-top: 6.818vw;
    background-size: 2.273vw 2.273vw, 11.364vw 2px, 11.364vw 2px;
    background-image:
      radial-gradient(circle, var(--c-amber) 0 1.136vw, transparent 1.2vw),
      linear-gradient(var(--c-green), var(--c-green)),
      linear-gradient(var(--c-green), var(--c-green));
  }

  .grn__in--stack .grn__stats {
    gap: 4.545vw;
  }

  .grn__in--stack .wel__st {
    padding: 5.682vw;
    border-top-width: .909vw;
    border-radius: 1.818vw;
  }

  .grn__in--stack .wel__n {
    font-size: 7.273vw;
    line-height: 8.636vw;
  }

  .wel__why {
    margin-top: 4.545vw;
  }
}