/* Our Process timeline — scoped to /our-process/ only.
   Desktop layout is the default. Phone stacking comes later. */
body.process-page .process-content.process-timeline-wrap{
  max-width:1440px;
  padding-top:clamp(28px,4vw,56px);
  padding-bottom:clamp(36px,4.5vw,64px);
  overflow:visible;
}
body.process-page .process-intro-copy{
  max-width:none;
  margin:0;
  text-align:left;
}
body.process-page .process-intro-copy .process-timeline-heading,
body.process-page .process-timeline-heading{
  max-width:none;
  font:700 32px/1.2 Manrope,Arial,sans-serif;
  letter-spacing:-.035em;
  color:#102f49;
  margin:0 0 35px;
  text-align:left;
}
body.process-page .process-timeline-heading br{display:block}

.process-timeline{
  position:relative;
  width:100%;
  display:block;
  padding:8px 48px 8px 80px;
  overflow:visible;
}

.process-cards-col{
  width:100%;
  max-width:none;
  min-width:0;
}

.process-explore{
  position:sticky;
  top:104px;
  z-index:8;
  width:max-content;
  max-width:280px;
  height:0;
  margin:0 0 0 -86px;
}
.process-explore-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:2px 0;
  border:0;
  background:transparent;
  color:#13263B;
  font:600 13px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.06em;
  cursor:pointer;
}
.process-explore-toggle svg{
  flex:none;
  transition:transform .25s ease;
}
.process-explore.is-open .process-explore-toggle svg{transform:rotate(180deg)}
.process-explore-panel{
  position:absolute;
  top:28px;
  left:0;
  min-width:248px;
  padding:16px 18px 18px;
  background:rgba(247,245,240,.96);
  border:1px solid #eee9e0;
  border-top:1px solid #d8b77d;
  border-radius:10px;
  box-shadow:0 14px 36px #102f4918;
  z-index:9;
}
.process-explore-panel[hidden]{display:none}

.process-step-menu{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:0;
}
.process-step-menu a{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:start;
  font:500 14px/1.4 Inter,Arial,sans-serif;
  color:#8a8174;
  min-height:auto;
  padding:0;
}
.process-step-menu a span{
  font:600 14px/1.4 Inter,Arial,sans-serif;
  color:#8a8174;
}
.process-step-menu a[aria-current="true"],
.process-step-menu a.is-active{
  color:#bb9254;
}
.process-step-menu a[aria-current="true"] span,
.process-step-menu a.is-active span{
  color:#bb9254;
}

.process-cards{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:42px;
  width:100%;
  max-width:none;
  margin:0;
  overflow:visible;
}

.process-card{
  position:relative;
  display:flex;
  flex-direction:row;
  width:100%;
  max-width:none;
  height:390px;
  margin:0;
  background:#fff;
  border:1px solid #eee9e0;
  border-top:1px solid #d8b77d;
  border-radius:10px 40px 10px 40px;
  box-shadow:0 3px 10px rgba(16,47,73,.04);
  overflow:visible;
  z-index:1;
  scroll-margin-top:120px;
  transition:height .55s cubic-bezier(.22,.61,.36,1),transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.process-card.is-expanded{height:auto;min-height:390px}

.process-card-media{
  flex:0 0 60%;
  order:0;
  width:60%;
  height:auto;
  align-self:stretch;
  position:relative;
  overflow:hidden;
  border-radius:0 39px 9px 0;
  background:#eeeae2;
  margin:0;
}
.process-card-media.is-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
}
.process-card-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.process-card-placeholder{
  font-size:92px;
  color:#a5a49f;
  line-height:1;
  font-weight:400;
  font-family:Manrope,Arial,sans-serif;
}

.process-card-text{
  flex:0 0 40%;
  width:40%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:33px 28px 28px;
  overflow:hidden;
}
.process-card.is-explore-target .process-card-text{
  background:rgba(247,245,240,.55);
}
.process-card.has-more .process-card-text{padding-bottom:20px}
.process-card.is-expanded .process-card-text{padding-bottom:28px;overflow:visible}
.process-card-num{display:none}

.process-card-copy{
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
  font:400 16px/26px Inter,Arial,sans-serif;
  color:#3f4449;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 30px),transparent);
}
.process-card:not(.has-more) .process-card-copy{
  -webkit-mask-image:none;
  mask-image:none;
  overflow:hidden;
}
.process-card.is-expanded .process-card-copy{
  flex:1 1 auto;
  min-height:auto;
  overflow:visible;
  -webkit-mask-image:none;
  mask-image:none;
}
.process-card-copy h2{
  font:700 25.3px/30px Manrope,Arial,sans-serif;
  letter-spacing:-.02em;
  color:#102f49;
  margin:0 0 17.5px;
  overflow-wrap:break-word;
}
.process-card-copy p{
  margin:0 0 13px;
  max-width:none;
  width:100%;
  font-size:16px;
  line-height:26px;
  color:#3f4449;
  overflow-wrap:break-word;
}
.process-card-copy p:first-of-type{margin-bottom:13px}
.process-card-copy p:last-child{margin-bottom:0}
.process-card-copy strong{color:#102f49}

.process-read-more{
  display:none;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  height:18px;
  flex:0 0 auto;
  padding:0 6px 0 0;
  border:0;
  background:transparent;
  cursor:pointer;
  font:700 14px/18px Inter,Arial,sans-serif;
  color:#bb9254;
  width:100%;
}
.process-card.has-more .process-read-more{display:flex}
.process-read-more span{
  border-bottom:1px solid #d8b77d;
  line-height:18px;
}
.process-read-more svg{flex:none}
.process-card.is-expanded .process-read-more svg{transform:rotate(180deg)}

.process-card-link{
  margin-top:8px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:14px;
  font:700 14px/18px Inter,Arial,sans-serif;
  color:#102f49;
  text-decoration:none;
  padding-bottom:7px;
  border:0;
}
.process-card-link svg{flex:none}

.process-card[data-process-step="7"] .process-card-copy{
  flex:0 0 310px;
  -webkit-mask-image:linear-gradient(#000 284px,transparent 310px);
  mask-image:linear-gradient(#000 284px,transparent 310px);
}
.process-card[data-process-step="7"] .process-read-more{margin-top:7px}
.process-card[data-process-step="7"].is-expanded .process-card-copy{
  flex:1 1 auto;
  -webkit-mask-image:none;
  mask-image:none;
}

.process-badge{
  display:block;
  position:absolute;
  left:-71px;
  top:20px;
  width:52px;
  height:52px;
  object-fit:contain;
  border:0;
  background:transparent;
  z-index:2;
}
.process-stitch{
  display:block;
  position:absolute;
  left:-57px;
  width:26px;
  background:url("/assets/images/process/line-tile.webp?v=c046791df7") 0 0 / 26px 12px repeat-y;
  pointer-events:none;
  z-index:1;
}

.process-knit-rail{
  position:absolute;
  z-index:3;
  pointer-events:none;
}
.process-knit-seg{
  position:absolute;
  background-repeat:repeat-y;
  background-position:0 -7px;
}


  :where(html.fine-nav) body.process-page .process-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 35px #102f4912;
    border-color:var(--gold);
    z-index:2;
  }

@media(prefers-reduced-motion:reduce){
  .process-card{transition:none}
  body.process-page .process-card:hover{transform:none}
}