/* =========================================================
   INFINITY — Our Story page, matching
   new-theme/more-pages/WhatsApp Image 2026-09-08 at 1.02.20 AM (2).jpeg.
   Scoped under .inf-story-v3 (applied to <main>) so nothing leaks
   into the shared nav/footer. Same pattern as lab-v3 / apparel-v3.
   Display type is Oswald (tight tracking, measured against the mockup),
   body Outfit, script Caveat Brush, quote Cormorant Garamond.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Outfit:wght@300;400;500;600&family=Caveat+Brush&family=Cormorant+Garamond:wght@500;600&display=swap");

/* Header: transparent over the hero photo, like the mockup. */
body.inf-story .eg-header__transparent {
   position: absolute !important;
   top: 0 !important;
   left: 0;
   right: 0;
   z-index: 20;
}
body.inf-story .eg-header__transparent:not(.header-sticky) {
   background: transparent !important;
   border-bottom: none !important;
}

.inf-story-v3{
  --os-bg:        #f4efe5;
  --os-card:      #eee7dd;
  --os-line:      #e2dbcc;
  --os-dark:      #0d0b0a;
  --os-text:      #1b1819;
  --os-muted:     #4d4842;
  --os-amber:     #8a6134;
  --os-tan:       #d6b586;
  --os-font-display: 'Oswald', sans-serif;
  --os-font-body:    'Outfit', sans-serif;
  --os-font-script:  'Caveat Brush', 'Caveat', cursive;
  --os-font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  font-family: var(--os-font-body);
  color: var(--os-text);
  background: var(--os-bg);
  overflow-x: hidden;
  display: block;
}

.inf-story-v3 img{ max-width:100%; display:block; }
.inf-story-v3 a{ text-decoration:none; color:inherit; }
.inf-story-v3 ul,
.inf-story-v3 ol{ list-style:none; margin:0; padding:0; }
.inf-story-v3 h1,
.inf-story-v3 h2,
.inf-story-v3 h3{ color: var(--os-text); margin: 0; }
.inf-story-v3 p{ color: var(--os-text); }

.inf-story-v3 .os-container{ width: 95%; margin: 0 auto; position: relative; z-index: 2; }
.inf-story-v3 .os-container--wide{ width: 92%; }

.inf-story-v3 .os-icon{
  width: 26px; height: 26px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.inf-story-v3 .os-icon--sm{ width: 16px; height: 16px; stroke-width: 2; }

.inf-story-v3 .os-leaf{ position:absolute; pointer-events:none; user-select:none; z-index: 5; }

/* ---------------- Script overlays ---------------- */
.inf-story-v3 .os-script{
  position:absolute; z-index: 4; margin: 0;
  font-family: var(--os-font-script);
  text-transform: uppercase;
  line-height: 1.02;
  color: #fff;
  transform: rotate(-9deg);
  transform-origin: left top;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.inf-story-v3 .os-script--dark{ color: var(--os-text); text-shadow: none; }
.inf-story-v3 .os-stroke{
  display:block; width: 70%; height: 6px; margin-top: 10px; margin-left: auto;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(190,140,55,0) 0%, #b78a34 22%, #d6a94b 100%);
  transform: rotate(-6deg) skewX(-20deg);
}

/* ---------------- Torn-paper edges ---------------- */
.inf-story-v3 .os-edge{
  position:absolute; left:0; right:0; height: 56px; z-index: 4; pointer-events:none;
  background: var(--os-bg);
  -webkit-mask-image: url('/assets/img/shape/footer-shape-01.png');
  mask-image: url('/assets/img/shape/footer-shape-01.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.inf-story-v3 .os-edge--bottom{ bottom:-1px; transform: scaleY(-1); }
.inf-story-v3 .os-edge--top{ top:-1px; }

/* ---------------- Type + buttons ---------------- */
.inf-story-v3 .os-eyebrow{
  display:block;
  font-family: var(--os-font-body); font-weight: 500;
  font-size: 15px; letter-spacing: .01em; text-transform: uppercase;
  color: var(--os-amber);
  margin-bottom: 8px;
}
.inf-story-v3 .os-eyebrow--lg{ font-size: 21px; margin-bottom: 6px; }
.inf-story-v3 .os-title{
  font-family: var(--os-font-display); font-weight: 600; text-transform: uppercase;
  line-height: 1.02; letter-spacing: -.06em;
}
.inf-story-v3 .os-title--xl{ font-size: clamp(32px, 3.6vw, 52px); }
.inf-story-v3 .os-title--lg{ font-size: clamp(28px, 2.95vw, 42px); }
.inf-story-v3 .os-title--tight{ font-size: clamp(30px, 3.3vw, 47px); line-height: .94; letter-spacing: -.045em; }
.inf-story-v3 .os-title--stack{ font-size: clamp(28px, 2.65vw, 38px); }
.inf-story-v3 .os-title-sm{ display:block; font-weight: 500; font-size: .72em; letter-spacing: -.03em; line-height: 1.1; }

.inf-story-v3 .os-btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 12px;
  height: 48px; padding: 0 32px;
  border-radius: 999px; border: 0;
  background: var(--os-dark); color:#fff;
  font-family: var(--os-font-body); font-size: 15.5px; font-weight: 500;
  transition: transform .2s, background .2s;
}
.inf-story-v3 .os-btn:hover{ background:#000; color:#fff; transform: translateY(-2px); }

/* ---------------- Hero ---------------- */
.inf-story-v3 .os-hero{
  position:relative; overflow:hidden;
  min-height: 537px; aspect-ratio: 2000 / 746;
  background: var(--os-bg);
}
.inf-story-v3 .os-hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 70% 50%; max-width:none;
}
.inf-story-v3 .os-hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, var(--os-bg) 0%, var(--os-bg) 30%, rgba(244,239,229,.86) 40%, rgba(244,239,229,.45) 49%, rgba(244,239,229,0) 58%);
}
.inf-story-v3 .os-hero-inner{ padding: 106px 0 0 5.8%; width: 100%; margin: 0; z-index: 6; }
.inf-story-v3 .os-hero-heading{
  font-family: var(--os-font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(42px, 5.2vw, 75px); line-height: .96; letter-spacing: -.07em;
  color: var(--os-dark);
}
.inf-story-v3 .os-hero-heading .accent{
  background: linear-gradient(180deg, #a87a45 0%, #8a5f33 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--os-amber);
}
.inf-story-v3 .os-hero-copy{
  max-width: 520px; margin: 18px 0 0;
  font-size: 17.5px; line-height: 1.38; color: var(--os-text);
}
.inf-story-v3 .os-hero-actions{ display:flex; gap: 20px; margin-top: 26px; }

.inf-story-v3 .os-leaf--hero-tl{ top: -18px; left: -52px; width: 128px; }
.inf-story-v3 .os-leaf--hero-l{ top: 280px; left: -50px; width: 118px; }
.inf-story-v3 .os-leaf--hero-tr{ top: -6px; right: -48px; width: 112px; }
.inf-story-v3 .os-leaf--hero-br{ bottom: -26px; right: -46px; width: 100px; }

/* ---------------- Our purpose ---------------- */
.inf-story-v3 .os-purpose{ position: relative; padding: 0 0 10px; }
.inf-story-v3 .os-purpose-row{
  display:grid; grid-template-columns: 31.4% minmax(0,1fr) 28.6%;
  min-height: 306px; align-items: stretch;
}
.inf-story-v3 .os-purpose-photo{ overflow:hidden; }
.inf-story-v3 .os-purpose-photo img{ width:100%; height:100%; object-fit: cover; max-width:none; }
.inf-story-v3 .os-purpose-copy{ padding: 30px 30px 26px 3vw; display:flex; flex-direction:column; align-items:flex-start; }
.inf-story-v3 .os-purpose-copy p{ margin: 14px 0 22px; font-size: 16.5px; line-height: 1.42; max-width: 500px; }
.inf-story-v3 .os-purpose-card{
  position:relative; overflow:hidden;
  margin: 12px 0.5% 12px 0; border-radius: 6px;
  background: var(--os-card);
  display:flex; align-items:center;
}
.inf-story-v3 .os-purpose-points{ position:relative; z-index:2; width:100%; padding: 0 26px; display:flex; flex-direction:column; gap: 22px; }
.inf-story-v3 .os-purpose-points li{ display:flex; align-items:center; gap: 22px; }
.inf-story-v3 .os-point-icon{
  width: 60px; height: 60px; border-radius: 50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--os-line); background: rgba(255,255,255,.4);
}
.inf-story-v3 .os-point-icon .os-icon{ width: 34px; height: 34px; stroke-width: 1.4; }
.inf-story-v3 .os-purpose-points strong{ display:block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.inf-story-v3 .os-purpose-points small{ display:block; margin-top: 4px; font-size: 15px; line-height: 1.25; color: var(--os-text); }
.inf-story-v3 .os-faint-leaf{ position:absolute; pointer-events:none; opacity: .2; filter: grayscale(1) sepia(.5); z-index:1; }
.inf-story-v3 .os-faint-leaf--a{ right: -18px; bottom: -34px; width: 96px; }
.inf-story-v3 .os-faint-leaf--b{ right: 30px; bottom: -40px; width: 84px; }
.inf-story-v3 .os-leaf--purpose-tr{ top: -30px; right: -34px; width: 88px; }

/* ---------------- Story behind Infinity ---------------- */
.inf-story-v3 .os-story{ position: relative; padding: 0 0 6px; }
.inf-story-v3 .os-story-row{
  display:grid; grid-template-columns: 29% minmax(0,1fr) 25.7%;
  min-height: 291px; align-items: stretch;
}
.inf-story-v3 .os-story-copy{ position:relative; z-index:3; padding: 22px 0 0 3.75vw; display:flex; flex-direction:column; align-items:flex-start; }
.inf-story-v3 .os-story-copy p{ margin: 12px 0 20px; font-size: 15.5px; line-height: 1.38; max-width: 392px; }
.inf-story-v3 .os-story-photo{ position:relative; margin-left: -2.6%; overflow:hidden; }
.inf-story-v3 .os-story-photo img{
  width:100%; height:100%; object-fit: cover; max-width:none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
}
.inf-story-v3 .os-quote{
  position:relative; overflow:hidden;
  background: #0d0d0b; margin-left: 4px;
  padding: 44px 8% 0 9%;
}
.inf-story-v3 .os-quote blockquote{
  position:relative; z-index:2; margin: 0;
  font-family: var(--os-font-serif); font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; color: #f5f0e6;
}
.inf-story-v3 .os-quote cite{
  position:relative; z-index:2; display:block; margin-top: 18px;
  font-style: italic; font-weight: 600; font-size: 15px; letter-spacing: .02em; color: #d8a24a;
}
.inf-story-v3 .os-quote-leaf{ position:absolute; pointer-events:none; z-index:1; filter: brightness(.5) saturate(.8); }
.inf-story-v3 .os-quote-leaf--l{ left: -22px; bottom: 36px; width: 78px; }
.inf-story-v3 .os-quote-leaf--r{ right: -26px; bottom: -18px; width: 130px; opacity: .85; }

/* ---------------- Key milestones ---------------- */
.inf-story-v3 .os-milestones{ position: relative; padding: 30px 0 22px; }
.inf-story-v3 .os-milestones-row{ position: relative; display:grid; grid-template-columns: 22.6% 66% minmax(0,1fr); align-items:start; }
.inf-story-v3 .os-milestones-head{ padding-left: 2px; }
.inf-story-v3 .os-timeline{ position:relative; display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); padding-top: 2px; }
.inf-story-v3 .os-timeline::before{
  content:''; position:absolute; left: 6px; right: 0; top: 8px; height: 1px; background: #b9b2a4;
}
.inf-story-v3 .os-timeline li{ position:relative; padding-right: 14px; }
.inf-story-v3 .os-dot{ display:block; width: 12px; height: 12px; border-radius: 50%; background: var(--os-dark); position:relative; z-index:1; margin-bottom: 20px; }
.inf-story-v3 .os-timeline time{ display:block; font-size: 18px; font-weight: 600; line-height: 1.1; }
.inf-story-v3 .os-timeline strong{ display:block; margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.inf-story-v3 .os-timeline small{ display:block; margin-top: 4px; font-size: 14.5px; line-height: 1.3; color: var(--os-muted); max-width: 150px; }
.inf-story-v3 .os-milestones-script{ position:relative; top: 2px; left: 12px; font-size: clamp(22px, 2.35vw, 34px); align-self:start; }

/* ---------------- Values ---------------- */
.inf-story-v3 .os-values{ position: relative; padding: 0; }
.inf-story-v3 .os-values-row{ display:grid; grid-template-columns: 240px repeat(5, minmax(0,1fr)); align-items:stretch; border-top: 1px solid var(--os-line); }
.inf-story-v3 .os-values-intro{ padding: 22px 8px 18px 12px; }
.inf-story-v3 .os-values-intro p{ margin: 10px 0 0; font-size: 15px; line-height: 1.3; }
.inf-story-v3 .os-value{ border-left: 1px solid var(--os-line); padding: 24px 12px 18px; text-align:center; }
.inf-story-v3 .os-value-icon{
  width: 59px; height: 59px; margin: 0 auto; border-radius: 50%;
  border: 1.5px solid var(--os-text);
  display:flex; align-items:center; justify-content:center;
}
.inf-story-v3 .os-value-icon .os-icon{ width: 30px; height: 30px; stroke-width: 1.4; }
.inf-story-v3 .os-value h3{ margin-top: 12px; font-family: var(--os-font-display); font-weight: 500; font-size: 21px; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; }
.inf-story-v3 .os-value p{ margin: 8px auto 0; font-size: 15px; line-height: 1.3; max-width: 190px; }
.inf-story-v3 .os-leaf--values-l{ top: -46px; left: -52px; width: 112px; }

/* ---------------- The bigger picture ---------------- */
.inf-story-v3 .os-bigger{ position: relative; margin-top: 12px; }
.inf-story-v3 .os-bigger-row{ display:grid; grid-template-columns: 35% 23% minmax(0,1fr); height: 352px; align-items: stretch; }
.inf-story-v3 .os-bigger-photo{ position:relative; overflow:hidden; }
.inf-story-v3 .os-bigger-photo img{ width:100%; height:100%; object-fit: cover; max-width:none; }
.inf-story-v3 .os-bigger-photo--l img{
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 91%, transparent 100%);
}
.inf-story-v3 .os-bigger-photo--r{ margin-left: -3%; }
.inf-story-v3 .os-bigger-photo--r img{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 100%);
}
.inf-story-v3 .os-bigger-copy .os-btn{ height: 44px; padding: 0 30px; }
.inf-story-v3 .os-bigger .os-edge--top{ height: 30px; }
.inf-story-v3 .os-bigger-copy{ position:relative; z-index:3; padding: 36px 0 0 0; justify-content:flex-start; display:flex; flex-direction:column; align-items:flex-start; min-width: 340px; margin-left: 1.5%; }
.inf-story-v3 .os-bigger-copy p{ margin: 12px 0 16px; font-size: 15.5px; line-height: 1.35; max-width: 340px; }
.inf-story-v3 .os-leaf--big-tl{ top: 6px; left: -52px; width: 112px; }
.inf-story-v3 .os-leaf--big-bl{ bottom: -6px; left: -48px; width: 100px; }

/* ---------------- Join our journey band ---------------- */
.inf-story-v3 .os-join{ position:relative; overflow:hidden; background:#14100d; min-height: 190px; }
.inf-story-v3 .os-join-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 62%; max-width:none; }
.inf-story-v3 .os-join-scrim{ position:absolute; inset:0; background: rgba(9,8,7,.66); }
.inf-story-v3 .os-join-inner{
  position:relative; z-index:3;
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,.7fr);
  align-items:center; gap: 34px;
  min-height: 190px; padding: 46px 0 26px;
}
.inf-story-v3 .os-join-copy{ padding-left: 2.4vw; }
.inf-story-v3 .os-join-copy h2{
  font-family: var(--os-font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(24px, 2.1vw, 30px); letter-spacing: -.02em; color:#fff; margin: 0 0 8px; line-height: 1.1;
}
.inf-story-v3 .os-join-copy p{ margin:0; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
.inf-story-v3 .os-join-form{ display:flex; align-items:stretch; height: 52px; background:#fff; border-radius: 999px; overflow:hidden; }
.inf-story-v3 .os-join-form input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  padding: 0 26px; font-family: var(--os-font-body); font-size: 14.5px; color: var(--os-text);
}
.inf-story-v3 .os-join-form button{
  flex: 0 0 auto; padding: 0 30px; border:0; cursor:pointer;
  background: var(--os-tan); color: var(--os-dark);
  display:flex; align-items:center; gap: 10px;
  font-family: var(--os-font-body); font-size: 15px; font-weight: 500;
  transition: background .2s;
}
.inf-story-v3 .os-join-form button:hover{ background:#e0c398; }
.inf-story-v3 .os-join-msg{ margin: 10px 0 0 22px; font-size: 14px; color:#fff; }
.inf-story-v3 .os-join-msg.is-ok{ margin:0; height: 52px; display:flex; align-items:center; padding: 0 26px; background: rgba(255,255,255,.12); border-radius: 999px; font-size: 15px; }
.inf-story-v3 .os-join-msg.is-error{ color:#ffb3a8; }
.inf-story-v3 .os-join-script{ top: 26%; left: 88%; font-size: clamp(16px, 2.2vw, 31px); }
.inf-story-v3 .os-leaf--join-l{ top: 12px; left: -46px; width: 104px; }
.inf-story-v3 .os-leaf--join-r{ top: 26px; right: -46px; width: 100px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px){
  .inf-story-v3 .os-values-row{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .inf-story-v3 .os-values-intro{ grid-column: 1 / -1; padding-bottom: 8px; }
  .inf-story-v3 .os-value:nth-of-type(n+1){ border-top: 1px solid var(--os-line); }
  .inf-story-v3 .os-milestones-row{ grid-template-columns: 1fr; gap: 26px; }
  .inf-story-v3 .os-milestones-script,
  .inf-story-v3 .os-leaf--values-l{ display:none; }
}
@media (max-width: 1000px){
  .inf-story-v3 .os-purpose-row{ grid-template-columns: 1fr; }
  .inf-story-v3 .os-purpose-photo{ height: auto; aspect-ratio: 427 / 290; }
  .inf-story-v3 .os-purpose-copy{ padding: 30px 6% 26px; }
  .inf-story-v3 .os-purpose-card{ margin: 0 4% 8px; padding: 26px 0; }
  .inf-story-v3 .os-story-row{ grid-template-columns: 1fr; }
  .inf-story-v3 .os-story-copy{ padding: 26px 6% 22px; }
  .inf-story-v3 .os-story-photo{ margin-left: 0; height: auto; aspect-ratio: 625 / 262; }
  .inf-story-v3 .os-quote{ margin: 0; padding: 40px 6% 44px; }
  .inf-story-v3 .os-bigger-row{ grid-template-columns: 1fr; height: auto; }
  .inf-story-v3 .os-bigger-photo--l{ height: auto; aspect-ratio: 542 / 321; }
  .inf-story-v3 .os-bigger-photo--r{ height: auto; aspect-ratio: 455 / 229; }
  .inf-story-v3 .os-bigger-photo--r{ margin-left: 0; }
  .inf-story-v3 .os-bigger-photo--l img,
  .inf-story-v3 .os-bigger-photo--r img{ -webkit-mask-image:none; mask-image:none; }
  .inf-story-v3 .os-bigger-copy .os-btn{ height: 44px; padding: 0 30px; }
.inf-story-v3 .os-bigger-copy{ margin: 0; padding: 34px 6%; min-width: 0; }
  .inf-story-v3 .os-join-inner{ grid-template-columns: 1fr; gap: 18px; }
  .inf-story-v3 .os-join-script{ display:none; }
}
@media (max-width: 900px){
  .inf-story-v3 .os-hero{ aspect-ratio: auto; min-height: 0; padding-bottom: 300px; }
  .inf-story-v3 .os-hero-bg{ top:auto; bottom:0; height: 320px; object-position: 70% 40%; }
  .inf-story-v3 .os-hero-scrim{ background: linear-gradient(180deg, var(--os-bg) 0%, var(--os-bg) 62%, rgba(244,239,229,0) 86%); }
  .inf-story-v3 .os-hero-inner{ padding: 116px 6% 0; }
  .inf-story-v3 .os-leaf--hero-l,
  .inf-story-v3 .os-leaf--hero-br{ display:none; }
}
@media (max-width: 700px){
  .inf-story-v3 .os-timeline{ grid-template-columns: 1fr; gap: 22px; padding-left: 26px; }
  .inf-story-v3 .os-timeline::before{ left: 5px; right:auto; top: 6px; bottom: 6px; width: 1px; height:auto; }
  .inf-story-v3 .os-dot{ position:absolute; left: -26px; top: 2px; margin: 0; }
  .inf-story-v3 .os-values-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .inf-story-v3 .os-leaf{ display:none; }
  .inf-story-v3 .os-values-row{ grid-template-columns: 1fr; }
  .inf-story-v3 .os-join-form button{ padding: 0 20px; }
}