:root{--off-white:#FCFCFB;--navy:#202441;--beige:#D8CCBA;--ink:#16182b;--line:rgba(32,36,65,.2);--light-line:rgba(252,252,251,.28);--display:'Cinzel',serif;--editorial:'Libre Baskerville',serif;--ui:'Montserrat',sans-serif} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--off-white);color:var(--navy);font-family:var(--ui);overflow-x:hidden} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit} ::selection{background:var(--beige);color:var(--navy)} .skip-link{position:absolute;left:12px;top:-60px;z-index:20;background:var(--off-white);color:var(--navy);padding:12px;font:600 11px var(--ui);letter-spacing:.08em}.skip-link:focus{top:12px}.site-nav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:27px 4.6%;color:var(--off-white)} .logo{font:600 21px/1 var(--display);letter-spacing:.04em}.logo small{display:block;margin-top:6px;font:500 7px/1.2 var(--ui);letter-spacing:.16em}.nav-links{display:flex;gap:26px;align-items:center;font:500 10px var(--ui);letter-spacing:.1em;text-transform:uppercase}.nav-links a:not(.nav-project){opacity:.8;transition:opacity .25s}.nav-links a:hover{opacity:1}.nav-project,.button{border:1px solid currentColor;padding:12px 15px;display:inline-flex;gap:27px;align-items:center;justify-content:space-between;font:500 10px var(--ui);letter-spacing:.1em;text-transform:uppercase;transition:color .3s,background-color .3s,transform .3s}.nav-project:hover{background:var(--off-white);color:var(--navy);transform:translateY(-2px)}.button:after{content:'\2197';font:16px/8px var(--editorial)} .hero{position:relative;display:grid;grid-template-columns:1.08fr .92fr;min-height:100svh;overflow:hidden;padding:0 4.6%;background:var(--navy);color:var(--off-white)}.hero-copy{z-index:3;align-self:center;max-width:700px;padding-top:7vh}.eyebrow{display:flex;align-items:center;gap:10px;font:500 10px var(--ui);letter-spacing:.13em;text-transform:uppercase}.eyebrow:before{content:'';width:29px;height:1px;background:currentColor}.hero h1{margin:0 0 23px;font:500 clamp(46px,6.15vw,93px)/.94 var(--display);letter-spacing:-.06em}.hero h1 em{font-family:var(--display);font-style:normal;font-weight:500;letter-spacing:inherit}.hero p{max-width:490px;margin:0;padding-left:17px;border-left:1px solid var(--beige);color:var(--beige);font:500 clamp(11px,1.1vw,15px)/1.8 var(--ui);letter-spacing:.17em;text-transform:uppercase}.button--light:hover{background:var(--off-white);color:var(--navy);transform:translateY(-3px)} .hero-art{position:relative;min-height:100svh;isolation:isolate}.hero-blueprint{position:absolute;z-index:0;width:150%;height:92%;right:-36%;top:4%;overflow:visible;color:rgba(216,204,186,.48);transform:translate3d(var(--hero-lines-x,0px),var(--hero-lines-y,0px),0);will-change:transform}.hero-blueprint .technical{fill:none;stroke:currentColor;stroke-width:1}.hero-blueprint .faint{opacity:.45}.hero-boot{position:absolute;z-index:1;right:-26%;bottom:-9%;width:min(58vw,835px);height:auto;filter:drop-shadow(20px 26px 15px rgba(0,0,0,.28));transform:rotate(-2deg);transform-origin:50% 70%;transition:transform .15s linear}.hero-boot .leather{fill:var(--beige);stroke:#8a7b67;stroke-width:3}.hero-boot .navy-leather{fill:#171a31;stroke:#0b0d1d;stroke-width:3}.hero-boot .sole{fill:#ded6c8;stroke:#8a7b67;stroke-width:3}.hero-boot .outsole{fill:#101224}.hero-boot .stitch{fill:none;stroke:#81735f;stroke-width:3;stroke-dasharray:2 6}.hero-boot .seam{fill:none;stroke:#61594e;stroke-width:3}.hero-scroll{position:absolute;z-index:4;top:17%;right:1.8%;bottom:auto;font:500 9px var(--ui);letter-spacing:.15em;writing-mode:vertical-rl} .partner{padding:127px 8%;display:grid;grid-template-columns:.65fr 1.35fr;gap:8%;align-items:start}.partner h2{margin:0;font:600 clamp(38px,5vw,74px)/1.05 var(--display);letter-spacing:-.045em}.partner-copy{max-width:710px}.partner-copy p{margin:0;font:400 clamp(19px,2.05vw,29px)/1.5 var(--editorial);letter-spacing:-.035em}.partner-copy p strong{font-weight:400;color:#6e6456}.partner-note{margin-top:45px;padding-top:13px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;font:500 10px/1.5 var(--ui);letter-spacing:.08em;text-transform:uppercase}.partner-note span:last-child{text-align:right} .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.3,1)}.reveal.is-visible{opacity:1;transform:none}.reveal--delay{transition-delay:.16s} .journey{height:580vh;position:relative;background:var(--beige);color:var(--navy)}.journey-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:.82fr 1.18fr;padding:0 4.6%}.journey-copy{position:relative;z-index:4;align-self:center;max-width:375px}.journey-copy .eyebrow{margin-bottom:24px}.journey-copy h2{position:absolute;top:27px;left:0;width:100%;margin:0;font:600 clamp(40px,5.3vw,80px)/.97 var(--display);letter-spacing:-.055em;opacity:0;transform:translateY(21px);transition:opacity .48s ease,transform .65s cubic-bezier(.2,.7,.2,1)}.journey-copy p{position:absolute;top:205px;left:0;width:95%;margin:0;font:400 15px/1.7 var(--ui);opacity:0;transform:translateY(16px);transition:opacity .46s ease .06s,transform .65s cubic-bezier(.2,.7,.2,1)}/* Stages with three-line headlines share a clear editorial text zone; Production (04) remains the unchanged reference. */.journey-copy h2.copy-0,.journey-copy h2.copy-1,.journey-copy h2.copy-2,.journey-copy h2.copy-4,.journey-copy h2.copy-5{top:18px}.journey-copy h2.copy-0 + p.copy-0,.journey-copy h2.copy-1 + p.copy-1,.journey-copy h2.copy-2 + p.copy-2,.journey-copy h2.copy-4 + p.copy-4,.journey-copy h2.copy-5 + p.copy-5{top:285px}.journey[data-stage="0"] .copy-0,.journey[data-stage="1"] .copy-1,.journey[data-stage="2"] .copy-2,.journey[data-stage="3"] .copy-3,.journey[data-stage="4"] .copy-4,.journey[data-stage="5"] .copy-5{opacity:1;transform:none}.journey-counter{position:absolute;left:4.6%;bottom:42px;font:500 10px var(--ui);letter-spacing:.13em}.journey-rail{position:absolute;left:4.6%;bottom:27px;width:min(250px,25vw);height:1px;background:rgba(32,36,65,.25)}.journey-rail span{display:block;width:calc(var(--journey-progress, 0) * 100%);height:100%;background:var(--navy);transition:width .1s linear}.stage-list{position:absolute;right:4.6%;bottom:33px;z-index:5;display:flex;gap:12px;font:500 9px var(--ui);letter-spacing:.1em;text-transform:uppercase}.stage-list span{opacity:.35;transition:opacity .35s}.stage-list span.is-active{opacity:1} .journey-visual{position:relative;min-height:100%;overflow:hidden}.asset{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .65s ease,clip-path .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);clip-path:inset(10% 10% 10% 10%);transform:scale(.92) translateY(20px)}.journey[data-stage="0"] .asset--vision,.journey[data-stage="1"] .asset--materials,.journey[data-stage="2"] .asset--prototype,.journey[data-stage="3"] .asset--production,.journey[data-stage="4"] .asset--quality,.journey[data-stage="5"] .asset--pickup{opacity:1;clip-path:inset(0);transform:scale(1) translateY(0)} .blueprint{width:min(80%,660px);aspect-ratio:1.32;background:var(--off-white);border:1px solid rgba(32,36,65,.2);padding:6%;position:relative;transform:translate(calc(var(--journey-progress, 0) * -16px),calc(var(--journey-progress, 0) * 12px))}.blueprint svg{width:100%;height:100%}.blueprint .diagram{fill:none;stroke:var(--navy);stroke-width:1.6}.blueprint .thin{stroke-width:.65;opacity:.7}.blueprint small{position:absolute;bottom:15px;left:18px;font:500 9px var(--ui);letter-spacing:.12em}.blueprint b{position:absolute;right:18px;bottom:15px;font:500 9px var(--ui);letter-spacing:.12em} .materials{width:min(75%,620px);height:min(72%,500px);position:relative}.materials:before{content:'MATERIAL LIBRARY';position:absolute;left:0;top:-30px;font:500 10px var(--ui);letter-spacing:.13em}.swatch{position:absolute;border:1px solid rgba(32,36,65,.33);transition:transform .65s cubic-bezier(.2,.7,.2,1)}.swatch:nth-child(1){width:46%;height:44%;background:var(--off-white);left:3%;top:6%;transform:rotate(-6deg)}.swatch:nth-child(2){width:39%;height:54%;background:var(--navy);right:5%;top:0;transform:rotate(7deg)}.swatch:nth-child(3){width:49%;height:43%;background:#918675;left:13%;bottom:1%;transform:rotate(3deg)}.swatch:nth-child(4){width:29%;height:35%;background:#afa08a;right:2%;bottom:10%;transform:rotate(-10deg)}.swatch small{position:absolute;bottom:10px;left:10px;color:inherit;font:500 8px var(--ui);letter-spacing:.12em}.swatch:nth-child(2) small{color:var(--off-white)}.stitch{position:absolute;left:4%;right:4%;top:50%;border-top:1px dashed var(--navy);transform:rotate(-9deg)} .prototype-shell{width:min(86%,690px);position:relative;transform:translateY(calc(var(--journey-progress, 0) * -20px))}.prototype-shell svg{display:block;width:100%;height:auto}.prototype-shell .base{fill:var(--off-white);stroke:var(--navy);stroke-width:3}.prototype-shell .cut{fill:var(--beige);stroke:var(--navy);stroke-width:3}.prototype-shell .draft{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:9 8}.prototype-label{position:absolute;right:2%;top:10%;background:var(--navy);color:var(--off-white);padding:10px 12px;font:500 9px var(--ui);letter-spacing:.12em}.prototype-label:after{content:'';position:absolute;right:100%;top:50%;width:55px;border-top:1px solid var(--navy)} .production-grid{position:relative;width:min(80%,640px);aspect-ratio:1.1;border:1px solid rgba(32,36,65,.42);background:var(--off-white);overflow:hidden}.production-grid:before,.production-grid:after{content:'';position:absolute;background:rgba(32,36,65,.14)}.production-grid:before{width:1px;top:0;bottom:0;left:50%}.production-grid:after{height:1px;left:0;right:0;top:50%}.production-grid svg{position:absolute;width:70%;height:70%;left:15%;top:14%;animation:none}.production-grid .machine{fill:none;stroke:var(--navy);stroke-width:3}.production-grid .moving{stroke-dasharray:12 10;animation:stitch 2.7s linear infinite}@keyframes stitch{to{stroke-dashoffset:-88}}.production-grid span{position:absolute;font:500 8px var(--ui);letter-spacing:.12em}.production-grid span:nth-of-type(1){top:13px;left:13px}.production-grid span:nth-of-type(2){bottom:13px;right:13px} .quality-object{position:relative;width:min(80%,660px);aspect-ratio:1.14}.quality-object:before{content:'';position:absolute;width:70%;height:70%;left:15%;top:14%;border:1px solid var(--navy);border-radius:50%;transform:scale(calc(.82 + var(--journey-progress, 0) * .13))}.quality-object svg{position:absolute;z-index:1;width:100%;height:100%}.quality-object .top{fill:var(--navy)}.quality-object .panel{fill:var(--beige)}.quality-object .sole{fill:var(--off-white);stroke:var(--navy);stroke-width:3}.quality-stamp{position:absolute;z-index:2;right:3%;bottom:7%;width:96px;height:96px;border:1px solid var(--navy);border-radius:50%;background:var(--beige);display:grid;place-items:center;text-align:center;font:600 9px/1.45 var(--ui);letter-spacing:.09em;transform:rotate(12deg)} .pickup{position:relative;width:min(74%,590px);aspect-ratio:1.05;background:var(--navy);color:var(--off-white);display:grid;place-items:center;overflow:hidden;transform:translateY(calc(var(--journey-progress, 0) * -13px))}.pickup svg{width:78%;height:auto;filter:drop-shadow(17px 17px 0 rgba(0,0,0,.18))}.pickup .top{fill:var(--off-white)}.pickup .panel{fill:var(--beige)}.pickup .sole{fill:#111329}.pickup p{position:absolute;left:20px;bottom:17px;margin:0;font:500 9px var(--ui);letter-spacing:.13em}.pickup b{position:absolute;right:20px;top:17px;font:500 9px var(--ui);letter-spacing:.13em} .services{padding:104px 4.6% 112px;background:var(--navy);color:var(--off-white);overflow:hidden}.services-header{display:flex;justify-content:space-between;gap:30px;padding-bottom:18px;border-bottom:1px solid var(--light-line)}.services h2{margin:0;font:600 clamp(35px,4.5vw,66px)/1 var(--display);letter-spacing:-.045em}.services-header p{max-width:325px;margin:0;font:400 14px/1.65 var(--ui);color:rgba(252,252,251,.78)}.service-tape{display:flex;width:max-content;gap:55px;margin-top:59px;transform:translateX(calc(var(--tape-shift, 0) * -1px))}.service-tape span{white-space:nowrap;font:400 clamp(33px,5vw,73px)/1 var(--editorial);letter-spacing:-.06em;color:var(--beige);transition:color .25s}.service-tape span:hover{color:var(--off-white)}.service-tape i{font-style:normal;color:var(--off-white);margin-left:55px} .colombia{display:grid;grid-template-columns:1fr 1fr;background:var(--off-white);min-height:680px}.colombia-media{position:relative;overflow:hidden;background:var(--beige)}.media-frame{position:absolute;inset:13% 10%;background:var(--navy);overflow:hidden;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}.colombia-media.is-visible .media-frame{transform:scale(1.04)}.media-frame:before{content:'';position:absolute;inset:18% 19% 14% 14%;border:1px solid var(--off-white);border-radius:48% 45% 23% 30%;transform:rotate(-15deg)}.media-frame:after{content:'COLOMBIAN CRAFT / GLOBAL STANDARD';position:absolute;left:15px;bottom:15px;color:var(--off-white);font:500 8px var(--ui);letter-spacing:.14em}.image-mask{position:absolute;inset:0;background:var(--beige);transform-origin:right;transition:transform 1.05s cubic-bezier(.7,0,.2,1)}.colombia-media.is-visible .image-mask{transform:scaleX(0)}.colombia-copy{padding:92px 11%;align-self:center}.colombia-copy h2{margin:22px 0 25px;font:600 clamp(43px,5.7vw,79px)/1.02 var(--display);letter-spacing:-.055em}.colombia-copy p{max-width:410px;margin:0 0 34px;font:400 15px/1.72 var(--ui)}.button--navy{color:var(--navy)}.button--navy:hover{background:var(--navy);color:var(--off-white);transform:translateY(-3px)} .contact{padding:112px 4.6% 30px;background:var(--beige)}.contact h2{max-width:940px;margin:22px 0 59px;font:600 clamp(53px,9vw,128px)/.92 var(--display);letter-spacing:-.065em}.contact h2 em{font-family:var(--editorial);font-weight:400}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;padding-top:18px;border-top:1px solid var(--line)}.contact-copy p{max-width:320px;margin:0 0 30px;font:400 15px/1.7 var(--ui)}.contact-copy a,.contact-email{font:500 10px var(--ui);letter-spacing:.1em}.contact-copy a{text-decoration:underline;text-underline-offset:5px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:23px}.field{margin-bottom:29px}.field label{display:block;margin-bottom:10px;font:500 9px var(--ui);letter-spacing:.12em;text-transform:uppercase}.field input,.field select,.field textarea{width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--navy);font:400 14px var(--ui);outline-offset:5px}.field textarea{min-height:78px;resize:vertical}.form-status{display:none;margin:0 0 20px;font:400 13px/1.6 var(--ui)}.form-status.is-visible{display:block}.submit{background:var(--navy);color:var(--off-white);border-color:var(--navy);cursor:pointer}.submit:hover{background:transparent;color:var(--navy);transform:translateY(-3px)}.footer{display:flex;justify-content:space-between;align-items:end;margin-top:94px;padding-top:20px;border-top:1px solid var(--line);font:500 9px/1.6 var(--ui);letter-spacing:.1em;text-transform:uppercase}.footer .logo{font-size:18px}.footer span{text-align:right} .hero-boot{transform:rotate(-2deg) translateY(var(--parallax-y,0px))} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.asset,.journey-copy h2,.journey-copy p,.media-frame,.image-mask{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}.asset{clip-path:none}.journey{height:auto}.journey-sticky{position:relative;min-height:780px}.journey[data-stage] .asset{display:none}.journey[data-stage="0"] .asset--vision{display:flex}.journey-copy h2,.journey-copy p{position:relative;top:auto;opacity:1;transform:none;margin-bottom:16px}.journey-copy .copy-1,.journey-copy .copy-2,.journey-copy .copy-3,.journey-copy .copy-4,.journey-copy .copy-5{display:none}} @media (max-width:800px){.site-nav{padding:21px 6%}.nav-links a:not(.nav-project){display:none}.nav-links{gap:0}.nav-project{padding:10px 11px}.hero{grid-template-columns:1fr;min-height:760px;padding:0 6%}.hero-copy{align-self:end;padding:0 0 98px}.hero h1{font-size:51px}.hero p{max-width:355px;font-size:10px;line-height:1.8;letter-spacing:.13em}.hero-art{position:absolute;inset:0;opacity:.46}.hero-boot{width:700px;right:-285px;bottom:-2%;transform:rotate(-2deg)}.hero-blueprint{width:850px;height:650px;right:-370px;top:4%}.hero-scroll{display:none}.hero-index{left:6%;bottom:27px;font-size:11px}.partner{padding:80px 6%;grid-template-columns:1fr;gap:30px}.partner h2{font-size:39px}.partner-copy p{font-size:20px}.partner-note{margin-top:32px;font-size:8px}.journey{height:500vh}.journey-sticky{grid-template-columns:1fr;padding:0 6%}.journey-copy{align-self:start;padding-top:130px;max-width:305px}.journey-copy h2{font-size:39px;top:157px}.journey-copy p{top:269px;font-size:13px}.journey-copy h2.copy-0,.journey-copy h2.copy-1,.journey-copy h2.copy-2,.journey-copy h2.copy-4,.journey-copy h2.copy-5{top:145px}.journey-copy h2.copy-0 + p.copy-0,.journey-copy h2.copy-1 + p.copy-1,.journey-copy h2.copy-2 + p.copy-2,.journey-copy h2.copy-4 + p.copy-4,.journey-copy h2.copy-5 + p.copy-5{top:306px}.journey-visual{position:absolute;right:-20%;left:37%;top:0}.journey-counter{left:6%;bottom:37px}.journey-rail{left:6%;bottom:24px;width:165px}.stage-list{right:6%;bottom:27px;gap:7px;font-size:7px}.stage-list span:not(.is-active){display:none}.blueprint,.materials,.prototype-shell,.production-grid,.quality-object,.pickup{width:100%}.materials{height:290px}.services{padding:80px 6%}.services-header{display:block}.services-header p{margin-top:22px}.service-tape{margin-top:46px;gap:32px}.service-tape span{font-size:41px}.service-tape i{margin-left:32px}.colombia{grid-template-columns:1fr}.colombia-media{height:440px}.colombia-copy{padding:73px 8%}.contact{padding:80px 6% 24px}.contact h2{font-size:58px;margin-bottom:47px}.contact-grid{grid-template-columns:1fr;gap:45px}.form-row{grid-template-columns:1fr;gap:0}.footer{margin-top:62px;gap:22px}.footer span{max-width:140px;font-size:8px}} /* Structural layout correction: five stages now use one flex composition instead of independent absolute text positions. */ .journey-stage-copy{display:none} .journey .journey-copy{align-self:center;height:min(62svh,560px)} .journey .journey-counter{opacity:0;pointer-events:none} .journey .journey-stage-copy{position:absolute;inset:0;display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(18px,3.2vh,30px);padding:clamp(18px,3vh,30px) 0} .journey[data-stage="0"] .stage-copy-0,.journey[data-stage="1"] .stage-copy-1,.journey[data-stage="2"] .stage-copy-2,.journey[data-stage="3"] .stage-copy-3,.journey[data-stage="4"] .stage-copy-4,.journey[data-stage="5"] .stage-copy-5{display:flex} .journey-stage-copy .eyebrow{margin:0} .journey-stage-copy h2{position:static;display:block;width:100%;margin:0;opacity:1;transform:none;font:600 clamp(40px,5.3vw,80px)/.97 var(--display);letter-spacing:-.055em;transition:none} .journey-stage-copy p{position:static;display:block;width:95%;margin:0;opacity:1;transform:none;font:400 15px/1.7 var(--ui);transition:none} .journey-stage-copy .stage-number{margin-top:clamp(5px,1.6vh,15px);font:500 10px var(--ui);letter-spacing:.13em} @media (max-width:800px){.journey .journey-copy{align-self:center;height:62svh;padding-top:0}.journey .journey-stage-copy{gap:clamp(16px,2.8vh,25px);padding:12px 0}.journey-stage-copy h2{font-size:39px;line-height:.97}.journey-stage-copy p{width:100%;font-size:13px;line-height:1.7}} /* Supplied hero boot: a transparent cutout keeps the original oversized, cropped editorial composition. */ .hero-art > .hero-boot{display:none} .hero-art::after{content:'';position:absolute;z-index:1;right:-9%;bottom:-3%;width:min(53vw,780px);aspect-ratio:3/2;background:url('../assets/hero-boot-cutout.png') center/contain no-repeat;transform:translate3d(var(--hero-boot-x,0px),var(--hero-boot-y,0px),0) scale(var(--hero-boot-scale,1));transform-origin:60% 70%;opacity:var(--hero-boot-opacity,1);will-change:transform,opacity} @media (max-width:800px){.hero-art::after{right:-24%;bottom:3%;width:min(105vw,660px)}.hero-blueprint{z-index:0}.hero-scroll{top:13%;right:3%}} @media (prefers-reduced-motion:reduce){.hero-art::after{transform:none;opacity:1}.hero-blueprint{transform:none}} /* Vision stage: supplied product-development photograph replaces the former shoe drawing. */ .vision-photo{position:relative;width:min(80%,660px);aspect-ratio:1.12;margin:0;overflow:hidden;background:var(--off-white);transform:translate3d(0,var(--vision-photo-y,0px),0) scale(var(--vision-photo-scale,1));opacity:var(--vision-photo-opacity,1);will-change:transform,opacity} .vision-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:sepia(.04) saturate(.92) contrast(.97) brightness(1.015)} .vision-photo figcaption{position:absolute;z-index:1;right:14px;bottom:13px;left:14px;display:flex;justify-content:space-between;color:var(--off-white);font:500 8px var(--ui);letter-spacing:.13em;text-shadow:0 1px 5px rgba(0,0,0,.55)} @media (max-width:800px){.vision-photo{width:100%;aspect-ratio:.88}.vision-photo img{object-position:50% 50%}} @media (prefers-reduced-motion:reduce){.vision-photo{transform:none;opacity:1}} /* Materials stage: four supplied photographs form one asymmetric material-sourcing editorial spread. */ .materials-editorial{position:relative;width:min(90%,760px);height:min(78svh,650px);--materials-progress:0} .material-image{position:absolute;margin:0;overflow:hidden;background:var(--off-white);will-change:transform,opacity} .material-image img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.04) saturate(.92) contrast(.97) brightness(1.015)} .material-image figcaption{position:absolute;right:10px;bottom:9px;left:10px;display:flex;justify-content:space-between;color:var(--off-white);font:500 7px var(--ui);letter-spacing:.12em;text-shadow:0 1px 4px rgba(0,0,0,.65)} .material-image--primary{z-index:2;width:62%;height:79%;right:7%;top:2%;transform:translate3d(calc(var(--materials-progress) * -18px),calc(var(--materials-progress) * -27px),0)} .material-image--development{z-index:4;width:34%;height:39%;left:0;bottom:4%;transform:translate3d(calc(var(--materials-progress) * 11px),calc(var(--materials-progress) * -18px),0)} .material-image--sourcing{z-index:1;width:43%;height:32%;left:14%;top:6%;transform:translate3d(calc(var(--materials-progress) * 7px),calc(var(--materials-progress) * -11px),0)} .material-image--library{z-index:3;width:34%;height:37%;right:0;bottom:0;transform:translate3d(calc(var(--materials-progress) * -5px),calc(var(--materials-progress) * -8px),0)} @media (max-width:800px){.materials-editorial{width:100%;height:440px}.material-image--primary{width:66%;height:72%;right:1%;top:4%}.material-image--development{width:43%;height:37%;left:-4%;bottom:4%}.material-image--sourcing{width:48%;height:28%;left:9%;top:7%}.material-image--library{width:39%;height:33%;right:-3%;bottom:1%}} @media (prefers-reduced-motion:reduce){.material-image--primary,.material-image--development,.material-image--sourcing,.material-image--library{transform:none}} /* Prototype stage: supplied workspace photograph replaces the technical shoe illustration. */ .prototype-photo{width:min(78%,660px);aspect-ratio:1.5;margin:0;overflow:hidden;background:var(--off-white);transform:translate3d(var(--prototype-photo-x,0px),var(--prototype-photo-y,0px),0) rotate(var(--prototype-photo-rotate,0deg));transform-origin:54% 54%;will-change:transform} .prototype-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:sepia(.04) saturate(.92) contrast(.97) brightness(1.015)} @media (max-width:800px){.prototype-photo{width:100%;aspect-ratio:1.3}.prototype-photo img{object-position:50% 50%}} @media (prefers-reduced-motion:reduce){.prototype-photo{transform:none}} /* Production stage: photo shifts inside the unchanged technical panel, while its border and labels stay fixed. */ .production-grid{isolation:isolate} .production-photo{position:absolute;z-index:0;left:0;width:100%;height:calc(100% + 74px);top:-37px;object-fit:cover;object-position:50% 56%;transform:translate3d(0,var(--production-photo-y,0px),0);filter:sepia(.04) saturate(.92) contrast(.97) brightness(1.015);will-change:transform} /* Quality stage: the supplied inspection photograph keeps the existing visual footprint and gains the same restrained scroll response as the journey. */ .quality-object{width:min(80%,640px);height:auto;margin:0;padding:0;box-sizing:border-box;aspect-ratio:1.1;overflow:hidden;background:transparent}.quality-object:before{display:none} .quality-photo{display:block;width:100%;height:100%;margin:0;padding:0;object-fit:cover;object-position:50% 28%;opacity:var(--quality-photo-opacity,.35);transform:translate3d(0,var(--quality-photo-y,10px),0) scale(var(--quality-photo-scale,1.03));transform-origin:50% 50%;filter:sepia(.04) saturate(.92) contrast(.97) brightness(1.015);transition:opacity .45s ease,transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity} @media (max-width:800px){.quality-object{width:100%;height:auto;aspect-ratio:1.1}.quality-photo{object-position:50% 30%}} @media (prefers-reduced-motion:reduce){.quality-photo{transform:none;opacity:1}} /* Ready stage: the supplied packing-area portrait fills the existing navy panel while moving only inside its fixed frame. */ .pickup{isolation:isolate;transform:none} .pickup svg{display:none} .pickup-photo{position:absolute;inset:-7% 0;width:100%;height:114%;display:block;margin:0;padding:0;object-fit:cover;object-position:52% 35%;opacity:var(--pickup-photo-opacity,.45);transform:translate3d(0,var(--pickup-photo-y,24px),0) scale(var(--pickup-photo-scale,1.07));transform-origin:50% 50%;filter:sepia(.04) saturate(.92) contrast(.97) brightness(1.015);transition:opacity .45s ease,transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity} @media (max-width:800px){.pickup-photo{object-position:52% 30%}} @media (prefers-reduced-motion:reduce){.pickup-photo{transform:none;opacity:1}} /* One shared editorial parallax for every journey photograph. The image moves inside its own clipped frame; the frame never shifts. */ .journey-photo-motion{transform:translate3d(0,var(--journey-image-y,3.5%),0) scale(var(--journey-image-scale,1.075))!important;transform-origin:50% 50%;opacity:1!important;transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform} @media (prefers-reduced-motion:reduce){.journey-photo-motion{transform:none!important;transition:none}} /* Why SR Faxhion: the original transparent team portrait enters horizontally inside the existing navy frame. */ .media-frame:before{display:none}.media-frame:after{z-index:2} .team-photo{position:absolute;z-index:1;left:50%;bottom:-3%;width:auto;height:108%;max-width:none;display:block;transform:translate3d(calc(-50% + var(--team-reveal-x,-20%)),0,0);transform-origin:50% 100%;filter:contrast(1.02) brightness(1.01);will-change:transform} @media (max-width:800px){.team-photo{height:104%;bottom:-2%}} @media (prefers-reduced-motion:reduce){.team-photo{transform:translate3d(-50%,0,0)}} .production-grid span{z-index:2;color:var(--off-white);text-shadow:0 1px 4px rgba(0,0,0,.55)} @media (max-width:800px){.production-photo{height:calc(100% + 34px);top:-17px}.production-grid span{font-size:7px}} @media (prefers-reduced-motion:reduce){.production-photo{transform:none}} /* New: By the numbers */ .stats{padding:100px 4.6%;background:var(--off-white)} .stats-header h2{margin:14px 0 0;font:600 clamp(34px,4.4vw,58px)/1.05 var(--display);letter-spacing:-.045em} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:34px;margin-top:46px;border-top:1px solid var(--line)} .stat-item{display:flex;flex-direction:column;gap:10px} .stat-number{font:600 clamp(34px,3.6vw,50px)/1 var(--display);letter-spacing:-.03em;color:var(--navy)} .stat-label{font:500 10px/1.5 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#6e6456} @media(max-width:800px){.stats{padding:70px 6%}.stats-grid{grid-template-columns:1fr 1fr;gap:34px 24px}} /* New: Trade + time zone advantage */ .advantage{padding:104px 4.6% 112px;background:var(--navy);color:var(--off-white)} .advantage-header{padding-bottom:18px;border-bottom:1px solid var(--light-line);margin-bottom:52px} .advantage-header h2{margin:14px 0 0;font:600 clamp(35px,4.5vw,66px)/1 var(--display);letter-spacing:-.045em} .advantage-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px} .advantage-block h3{margin:0 0 14px;font:400 clamp(20px,2vw,26px)/1.25 var(--editorial);letter-spacing:-.02em} .advantage-block p{margin:0;font:400 14px/1.7 var(--ui);color:rgba(252,252,251,.78)} @media(max-width:800px){.advantage{padding:80px 6%}.advantage-grid{grid-template-columns:1fr;gap:34px}} /* New: Who we build for (social proof, no client names) */ .proof{padding:110px 4.6%;background:var(--off-white)} .proof-header h2{margin:14px 0 0;font:600 clamp(34px,4.4vw,58px)/1.05 var(--display);letter-spacing:-.045em} .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:34px;margin-top:46px;border-top:1px solid var(--line)} .proof-item h3{margin:0 0 10px;font:500 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#6e6456} .proof-item p{margin:0;font:400 17px/1.55 var(--editorial);letter-spacing:-.01em} .proof-note{margin-top:52px;padding-top:20px;border-top:1px solid var(--line);font:500 10px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#6e6456} @media(max-width:800px){.proof{padding:76px 6%}.proof-grid{grid-template-columns:1fr;gap:30px}} /* New: FAQ */ .faq{padding:104px 4.6%;background:var(--beige)} .faq-header h2{margin:14px 0 0;font:600 clamp(34px,4.4vw,58px)/1.05 var(--display);letter-spacing:-.045em} .faq-list{margin-top:46px;border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{cursor:pointer;padding:24px 0;font:500 15px var(--ui);letter-spacing:-.005em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:after{content:'+';font:400 22px var(--editorial);flex-shrink:0;transition:transform .3s} .faq-item[open] summary:after{transform:rotate(45deg)} .faq-item p{margin:0 0 26px;max-width:640px;font:400 15px/1.7 var(--ui);color:#4b4636} @media(max-width:800px){.faq{padding:76px 6%}} /* Mobile fix: hero blueprint labels overlapped the headline/tagline */ @media (max-width:800px){ .hero-blueprint text{display:none} } /* Mobile fix: the pinned scroll-jacking "journey" caused text/image overlap and left stage content bleeding into the sections below it. Replace with a plain stacked flow: each stage's text followed by its image, in order. */ @media (max-width:800px){ .journey{height:auto} .journey-sticky{position:relative;top:auto;height:auto;display:grid;grid-template-columns:1fr;padding:64px 6% 0;row-gap:56px} .journey-copy,.journey-visual{display:contents} .journey .journey-stage-copy{display:flex!important;position:relative;inset:auto;padding:0} .journey .asset{position:relative;inset:auto;opacity:1!important;pointer-events:auto;clip-path:none!important;transform:none!important} .journey-counter,.journey-rail,.stage-list{display:none} .stage-copy-0{order:1}.asset--vision{order:2} .stage-copy-1{order:3}.asset--materials{order:4} .stage-copy-2{order:5}.asset--prototype{order:6} .stage-copy-3{order:7}.asset--production{order:8} .stage-copy-4{order:9}.asset--quality{order:10} .stage-copy-5{order:11}.asset--pickup{order:12} }